前言：网上有很多关于垂直居中的方法，我知道几种，但是遇到一个特定情况时，总是要想一想哪种可能合适，对这些方法的应用场景有点模糊。于是，今天就总结了一下较常见的几种场景，并给出其对应的垂直居中方法。
分以下几个场景：
1、单行文本垂直居中；
2、多行文本垂直居中（包含块高度已知）；
3、多行文本垂直居中（包含块高未知）；
4、盒子垂直居中（盒子高度已知）；
5、盒子垂直居中（盒子高度未知）；
1、2、3、讨论文本居中时均采用以下HTML结构（多行文本时加多文字即可）
<div id="container">
啊啊啊啊啊
</div>
4、5、讨论盒子剧中时均采用以下HTML结构
<div id="container"> <div id="box"></div> </div>
单行文本
方法：将容器的height和line-height设为相同值
#container{
200px;
height:30px;
line-height:30px;
background: #ccc;
}
多行文本（容器高度已知）
方法：将容器设为display：table-cell且vertical-align：middle。（vertical-align只能适用于内联元素和表单元格，当应用与表单元格时，让表单元格的内容居中显示）
#container{
200px;
height:100px;
display: table-cell;
vertical-align: middle;
background: #ccc;
}
（此方法也可应用于高度未知的情况）
多行文本（容器高度未知）
方法：给容器设置上下相同的padding值。（此时容器的高度由内容和padding撑开）
#container{
200px;
padding:20px;
background: #ccc;
}
盒子垂直居中（盒子高度已知）
方法：盒子绝对定位+负margin值
#container{
200px;
height:200px;
background: #ccc;
position: relative;
}
#box{
100px;
height:100px;
background: black;
position: absolute;
/*水平居中*/
left:50%;
margin-left:-50px;
/*垂直居中*/
top:50%;
margin-top: -50px;
}
盒子垂直居中（盒子高度未知）
（以下能应用于盒子高度未知场景的方法均可用于高度已知的场景）
方法一：容器设置display：table-cell和vertica-align：middle（此方法与场景2的方法一样，均是利用vertica-align：middle使表单元内容居中的特性）
#container{
200px;
height:200px;
background: #ccc;
display:table-cell;
vertical-align: middle;
}
#box{
100px;
background:#aaa;
/*水平居中*/
margin:0 auto;
}
方法二：盒子绝对定位+translate（此方法与场景4方法类似，只是用translate代替负margin值，这样就不需要知道高度）
#container{
200px;
height:200px;
background: #ccc;
position: relative;
}
#box{
100px;
background:#aaa; position: absolute; left:50%; top:50%; /*代替margin-left和margin-top*/ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); }
（此方法用到了css3的transform，所以ie9以下不支持）
方法三：flex方法
#container{
200px;
height:200px;
background: #ccc;
display: flex;
/*垂直居中*/
align-items: center;
/*水平居中*/
justify-content: center;
}
#box{
100px;
background:#aaa;
}
（此方法ie9及ie9以下不支持）
flex还可以实现各种各样的布局，可以参见以下两篇文章