绝对定位实现垂直水平居中
优点：兼容性好
缺点：需要知道宽高，不够灵活
<div class="box">
<div class="txt">已知宽高</span>
</div>
.txt{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -300px;
}
transform实现垂直水平居中
优点：不需要知道宽高，灵活
缺点：兼容性不好，在Mobile设备上建议使用
<div class="box">
<div class="txt">未知宽高</span>
</div>
.txt{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
margin:auto实现垂直水平居中
优点：灵活且兼容性好（IE8+）
缺点：适用于有尺寸的元素。
<div class="box">
<div class="txt">已知宽高</span>
</div>
.txt{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
原理：
先把margin:auto; width:600px; height:400px;干掉后，你会惊奇的发现，.txt 铺满了整个.box。这是为什么呢？
先看下剩余属性：left,right,top,bottom，文档说明的很清楚，比如：left值，就是元素的左边缘距离父元素左边缘的距离。当left-right 两个值同时存在且都为0，top-bottom两个值也同时存在且都为0。子元素.txt只能左右上下铺满整个.box。
再看下margin:auto。它的填充规则和普通流体元素一模一样：
- 如果一侧定值，一侧auto, auto为剩余空间大小
- 如果两侧为auto, 则平分剩余空间。
flexbox 实现垂直水平居中
优点：不需要知道宽高，灵活
缺点：兼容 性不好，在Mobile设备上建议使用
<div class="box">
<div class="txt">未知宽高</span>
</div>
.box{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
}
table 实现垂直水平居中
优点：兼容性好
<div class="box">
<span class="txt">这里显示多行文字</span>
</div>
.box{
width:500px;
height:500px;
border:1px solid red;
display: table-cell;
vertical-align:middle;
}
.box .txt{
display:inline-block;
}
