前言：在前端的日常开发中，通常掌握三五种方案就足以解决绝大多数的垂直水平居中需求。所以此文并不是用于工作上的需求处理，而且希望通过抛砖引玉，能和大家一起探寻下css的深度。
以下为本人了解的几种方法：
一、块级元素
1、定位 + margin: auto
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
注：兼容至ie7。需要设置box的宽高，否则box将充满整个父元素或body。
2、定位 + 负margin
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
注：兼容至ie7。需要box定宽高用于计算margin。
3、定位 + translate
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
注：兼容性至ie10。无需关注box的宽高，可自适应。
4、定位 + calc
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
</style>
注：兼容性至ie9。需要box定宽高用于计算calc。
5、flex
<div class="parent">
<div class="box">你好，世界。</div>
</div>
<style type="text/css">
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
注：兼容性至ie11。需要增加父级元素。无需关注box的宽高，可自适应。（当box宽度超过parent时，需要处理box内容塌陷问题。）
二、行内元素
1、text-align + vertical-align
<div class="parent">
<div class="box">你好，世界。</div>
<div class="after"></div>
</div>
<style type="text/css">
.parent {
height: 100vh;
text-align: center;
}
.after{
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
vertical-align: middle;
}
.box{
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
</style>
注：兼容性至ie4。依赖兄弟元素或伪元素（伪元素兼容至ie9）。与table均为块级元素垂直水平居中的古老魔法。
2、text-align + line-height
<div class="parent">
<span class="box">你好，世界。</span>
</div>
<style type="text/css">
.parent {
height: 100vh;
line-height: 100vh;
text-align: center;
}
</style>
注：兼容性至ie4。需要父元素定高，仅对行内或行内块元素有效。
三、表单元素
1、Table + text-align
<div class="parent">
<span class="box">你好，世界。</span>
</div>
<style type="text/css">
.parent {
display: table;
width: 100vh;
height: 100vh;
}
.box{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
注：兼容性至ie8。
2、Table + text-align
<Table>
<tr>
<td>你好，世界</td>
</tr>
</Table>
<style type="text/css">
Table {
width: 100vh;
height: 100vh;
text-align: center;
}
</style>
注：兼容性至ie3。古老魔法！！！