关于水平垂直居中，这是一个很简单的问题，但是很多时候，往往简单的东西，反而做不出来。这就是基础不扎实的缘故吧，我参照一些资料，总结了水平垂直居中的几种方法如下：
1 .文字水平垂直居中
这个比较简单，只要分别设置水平集中和垂直居中即可
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style lang=""> 7 div{ 8 width:500px; 9 height:100px; 10 background: #ccc; 11 text-align:center; 12 line-height: 100px; 13 } 14 </style> 15 </head> 16 <body> 17 <div> 18 I am huanying2015! 19 </div> 20 </body> 21 </html>
2.水平垂直居中
2.1 把父元素设置成相对定位，子元素设置成绝对定位，margin为auto,left/right/top/bottom都分别设置为0；（备注：如果不是图片，是其他子元素的话，要设定子元素的宽和高，否则显示不出来，行内元素（inline）是没有宽高的，会聚集到最中央的一点去）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style lang=""> 7 .box{ 8 width:500px; 9 height:500px; 10 background: #ccc; 11 margin:30px auto; 12 position:relative; 13 } 14 img{ 15 position:absolute; 16 margin:auto; 17 left:0; 18 right:0; 19 top:0; 20 bottom: 0; 21 } 22 23 </style> 24 </head> 25 <body> 26 <div class="box"> 27 <img src="picture.jpg" alt=""> 28 </div> 29 </body> 30 </html>
分析：子元素的上下左右（top/bottom/left/right）都设置为0，margin设置为auto;从四个方向进行定位，可以形象的看作是从四面拉扯，最终在中间进行平衡~~，形象一点，可以叫做四面拉扯法或者四点定位法
2.2 子元素居中，从原理上进行定位：
父元素设置position为relative;元素设置为absolute;要居中定位，实际上是要找子元素的起始点的位置，也就是左上角的点位置；一个元素，起始点定了，加上它本身的高和宽，这个元素就定型了；父元素的width/height，相当于子元素的left/top;子元素在父素中的定位，实际上就是本身margin的变化，这样，就可以找到子元素的起始点了：
子y = top*50% - margin-top*50%; 子x = left*50%- margin-left*50%；代码表示如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style lang=""> 7 .box{ 8 width:500px; 9 height:500px; 10 background: #ccc; 11 margin:30px auto; 12 position:relative; 13 } 14 .child{ 15 position:absolute; 16 width:200px; 17 height:200px; 18 top:50%; 19 left:50%; 20 margin-left:-100px; 21 margin-top:-100px; 22 background: #666; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="box"> 28 <span class="child"></span> 29 </div> 30 </body> 31 </html>
2.3 采用table的属性，将父元素设置display:table-cell;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style lang=""> 7 .box{ 8 width:500px; 9 height:500px; 10 background: #ccc; 11 display:table-cell; 12 vertical-align:middle; 13 text-align:center; 14 margin:30px auto; 15 position:relative; 16 } 17 .child{ 18 display:inline-block; 19 width:200px; 20 height:200px; 21 background: #666; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="box"> 27 <span class="child"></span> 28 </div> 29 </body> 30 </html>
2.4 采用盒子模型flex;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style lang=""> 7 .box{ 8 width:500px; 9 height:500px; 10 background: #ccc; 11 margin:30px auto; 12 position:relative; 13 display:flex; 14 display:-webkit-flex; 15 align-items:center; 16 -webkit-align-items:center; 17 justify-content:center; 18 } 19 .child{ 20 width:200px; 21 height:200px; 22 background: #666; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="box"> 28 <span class="child"></span> 29 </div> 30 </body> 31 </html>
2.5 采用Css3 的 transform 的translate属性进行水平垂直居中：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style lang=""> 7 .box{ 8 width:500px; 9 height:500px; 10 background: #ccc; 11 margin:30px auto; 12 position:relative; 13 } 14 .child{ 15 position:absolute; 16 width:200px; 17 height:200px; 18 top:50%; 19 left:50%; 20 background: #666; 21 -ms-transform: translate(-50%,-50%); 22 -moz-transform: translate(-50%,-50%); 23 -o-transform: translate(-50%,-50%); 24 transform: translate(-50%,-50%); 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box"> 30 <span class="child"></span> 31 </div> 32 </body> 33 </html>
运行结果：
