垂直居中
前言：網上有不少關於垂直居中的方法，我知道幾種，可是遇到一個特定狀況時，老是要想想哪一種可能合適，對這些方法的應用場景有點模糊。因而，今天就總結了一下較常見的幾種場景，並給出其對應的垂直居中方法。css
分如下幾個場景：html
一、單行文本垂直居中；css3
二、多行文本垂直居中（包含塊高度已知）；web
三、多行文本垂直居中（包含塊高未知）；佈局
四、盒子垂直居中（盒子高度已知）；flex
五、盒子垂直居中（盒子高度未知）；spa
一、二、三、討論文本居中時均採用如下HTML結構（多行文本時加多文字便可）3d
<div id="container">
啊啊啊啊啊
</div>
四、五、討論盒子劇中時均採用如下HTML結構code
<div id="container"> <div id="box"></div> </div>
單行文本
方法：將容器的height和line-height設爲相同值orm
#container{
width:200px;
height:30px;
line-height:30px;
background: #ccc;
}
多行文本（容器高度已知）
方法：將容器設爲display：table-cell且vertical-align：middle。（vertical-align只能適用於內聯元素和表單元格，當應用與表單元格時，讓表單元格的內容居中顯示）
#container{
width:200px;
height:100px;
display: table-cell;
vertical-align: middle;
background: #ccc;
}
（此方法也可應用於高度未知的狀況）
多行文本（容器高度未知）
方法：給容器設置上下相同的padding值。（此時容器的高度由內容和padding撐開）
#container{
width:200px;
padding:20px;
background: #ccc;
}
盒子垂直居中（盒子高度已知）
方法：盒子絕對定位+負margin值
#container{
width:200px;
height:200px;
background: #ccc;
position: relative;
}
#box{
width: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{
width:200px;
height:200px;
background: #ccc;
display:table-cell;
vertical-align: middle;
}
#box{
width:100px;
background:#aaa;
/*水平居中*/
margin:0 auto;
}
方法二：盒子絕對定位+translate（此方法與場景4方法相似，只是用translate代替負margin值，這樣就不須要知道高度）
#container{
width:200px;
height:200px;
background: #ccc;
position: relative;
}
#box{
width: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{
width:200px;
height:200px;
background: #ccc;
display: flex;
/*垂直居中*/
align-items: center;
/*水平居中*/
justify-content: center;
}
#box{
width:100px;
background:#aaa;
}
（此方法ie9及ie9如下不支持）
flex還能夠實現各類各樣的佈局，能夠參見如下兩篇文章