关于水平垂直居中，这是一个很简单的问题，但是很多时候，往往简单的东西，反而做不出来。这就是基础不扎实的缘故吧，我参照一些资料，总结了水平垂直居中的几种方法如下：
1 .文字水平垂直居中
这个比较简单，只要分别设置水平集中和垂直居中即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
div{
width:500px;
height:100px;
background: #ccc;
text-align:center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
I am huanying2015!
</div>
</body>
</html>
2.水平垂直居中
2.1 把父元素设置成相对定位，子元素设置成绝对定位，margin为auto,left/right/top/bottom都分别设置为0；（备注：如果不是图片，是其他子元素的话，要设定子元素的宽和高，否则显示不出来，行内元素（inline）是没有宽高的，会聚集到最*的一点去）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
}
img{
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom: 0;
} </style>
</head>
<body>
<div class="box">
<img src="picture.jpg" alt="">
</div>
</body>
</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%；代码表示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
}
.child{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
background: #666;
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
2.3 采用table的属性，将父元素设置display:table-cell;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
display:table-cell;
vertical-align:middle;
text-align:center;
margin:30px auto;
position:relative;
}
.child{
display:inline-block;
width:200px;
height:200px;
background: #666;
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
2.4 采用盒子模型flex;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
}
.child{
width:200px;
height:200px;
background: #666;
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
2.5 采用Css3 的 transform 的translate属性进行水平垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
}
.child{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
background: #666;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
运行结果：