一、前言：
垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。
主要方式：
- line-height
- 绝对定位
- 表格 display：table-cell
主要需求：
- 固定宽高
- 不固定宽高
主要兼容：
- ie8+ 主流浏览器
- ie6,7
二、行高
1. 利用行高与高度相同，实现单行文本居中
缺点：只能是单行文本
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;}
</style>
</head>
<body>
<div class="d1">
fdsfdsfdsfdfsfds
</div>
</body>
</html>
2.利用inline-block改进（推荐）
改变display属性，就可以是块元素了，vertical-align: middle;设置垂直属性
优点：自适应内容
兼容：>=ie8 + 主流
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.div1{
width: 500px;height: 500px;
background-color: blue;
text-align: center;
line-height: 500px;
}
.div2{
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: red;
/*通过 line-hight 来垂直居中 此法>= ie8*/
}
</style>
<body>
<div class="div1">
<div class="div2"> </div>
</div>
</body>
</html>
三、绝对定位
1.负margin
top，left 50%；margin -50%；
缺点：需固定宽高
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.div1{
width: 500px;height: 500px;
background-color: blue;
position: relative;
}
.div2{
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
margin-left: -100px; /*此处为width的一半，所以应用此法，元素必须固定宽、高*/
margin-top: -100px; }
</style>
<body>
<div class="div1">
<div class="div2">
fdsfsdffdf
fdsfdsfsdff
</div>
</div>
</body>
</html>
2.css3 translate
我们希望实现不固定宽高，在上法上改进。可以用js，动态添加宽高，但不推荐。其实可以用css3 translate属性，因为translate是唯一一个相对于自身宽度计算的属性
兼容：>=ie9 + 主流
优点：自适应内容
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.div1{
width: 500px;height: 500px;
background-color: blue;
position: relative;
}
.div2{
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
/*应用css3 translate属性是相对于自身的，此法>=ie9，且宽高自适应*/
}
</style>
<body>
<div class="div1">
<div class="div2">
fdsfsdffdf
fdsfdsfsdff
</div>
</div>
</body>
</html>
3.绝对定位 + 相对定位（推荐）
思想与上面的方式是一样，只是这是基于ie6,7的bug，相对定位位移父元素的50%
缺点：多添加一个容器标签
优点：自适应内容
兼容：ie6,7
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.middle-demo-4{
background-color: blue;
height: 300px;
width: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 50%;
}
.middle-demo-4 div div{
height: 200px;
background-color: red;
position: relative;
top: -50%;
left: -50%;
}/*ie6 ie7*/
</style>
</head>
<body>
<div class="middle-demo-4">
<div>
<div>dsfdsfdsfdsfdsfdsfdsf</div>
</div>
</div> </body>
</html>
4.margin：auto
绝对定位下，固定宽高，top：0，bottom：0，会自适应内容，多余部分会用margin填充
缺点：固定宽高
兼容：>=ie8
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.div1{
width: 500px;height: 500px;
background-color: blue;
position: relative;
}
.div2{
margin: auto;
position: absolute;
background-color: red;
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0; }
</style>
<body>
<div class="div1">
<div class="div2">
fdsfsdffdf
fdsfdsfsdff
</div>
</div>
</body>
</html>
四、表格
1.table-cell（推荐）
单元格可以设置垂直属性 vertical-align: middle;
优点：自适应内容
兼容：>=ie8 +主流
缺点：子元素为浮动、绝对定位无效（注意）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.div1{
width: 500px;height: 500px;
background-color: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div2{
/*float: left;position: absolute; 子元素为浮动、绝对定位无效
此法>=ie8
*/}
</style>
<body>
<div class="div1">
<div class="div2">
fdsfsdffdf
fdsfdsfsdff
</div>
</div>
</body>
</html>
五、总结
根据兼容性和自适应内容来考虑 表格/行高法 + 相对定位法
如果固定宽高 负margin法