最近总被这玩意坑，面试官也老爱问，“还有别的方式吗”.......
1、使用绝对定位
元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width
有点需要注意的是，设置子元素的宽度高度。
1 <div class="container"> 2 <div class="center absolute_center"></div> 3 </div>
CSS：
1 <style type="text/css"> 2 .absolute_center{ 3 position:absolute; 4 width:200px; 5 height:200px; 6 top:0; 7 bottom:0; 8 left:0; 9 right:0; 10 margin:auto; 11 background:#333; 12 resize:both;/*用于设置了所有除overflow为visible的元素*/ 13 overflow:auto; 14 } 15 </style>
2、文字简单居中
使用lineheight实现简单的垂直居中
1 <div class="single_line"> 2 文字文字文字文字文字文字文字TextTextTextTextTextText 3 </div>
CSS：
1 <style type="text/css"> 2 .single_line{ 3 height: 30px; 4 font-size: 14px; 5 line-height: 30px; 6 text-align: center; 7 border: 1px solid #518dca; 8 } 9 </style>
3、使用Flex弹性盒子
Flex在移动端的布局中非常常见，但是对低版本的浏览器有兼容性问题。
父容器container需要设置height高度
1 <div class="container"> 2 <div class="center"> 3 CENTER 4 </div> 5 </div>
1 .container{ 2 height: 500px; 3 background: #333333; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 } 8 .center{ 9 100px; 10 height: 100px; 11 background-color: #fff; 12 }
4、使用transform属性位置偏移
父容器需要设置height
1 <div class="container"> 2 <div class= "center">center</div> 3 </div>
1 <style type="text/css"> 2 .container{ 3 height:300px; 4 background:#d6d6d6; 5 position:relative; 6 } 7 .center{ 8 position: absolute; 9 top: 50%; 10 left: 50%; 11 transform: translate(-50%, -50%); 12 13 width:100px; 14 height:100px; 15 background-color:#666; 16 } 17 </style>
5、使用table-cell布局
父容器需要设置height、width的值
1 <div class="container"> 2 <span class="center">center</span> 3 </div>
1 <style type="text/css"> 2 .container{ 3 width:500px; 4 height:500px; 5 background:#d6d6d6; 6 display:table-cell; 7 text-align:center; 8 vertical-align:middle; 9 } 10 11 .center{ 12 background-color:#666; 13 } 14 </style>