CSS垂直居中方法總結（部分翻譯）

１，利用設置行高
（1）單行文本垂直居中，

<div id="parent">
<div id="child">Text here</div>
</div>

#child {
line-height: 200px;
}

ｄｅｍｏ
ｐｓ：對於子節點的ＤＯＭ設置line-height,使line-height等於height高，這對於節點元素是單行文本的較有效。其中這個行高比字體大小大哦~
（2）居中圖片

<div id="parent">
    <img src="image.png" alt="" />
</div>

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

本方法中行高需要比圖片高度設置的更高。再對圖片設置vertical-align:middle;

2，利用CSS表格（不是html表格）

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

demo
將父節點設置爲表格表示tabel-cell，之後可以在子節點上使用vertical-align:middle.則子塊div裏頭的元素會垂直居中

在低版本的IE瀏覽器中，要添加：

#child {
    display: inline-block;
}

3，對於塊級元素
demo

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

與前兩種方法最大的不同，此方法針對塊級元素，而且對各個瀏覽器的適配比較好。

4，streching
demo

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

對於top,bottom,left,right四個邊設置爲0，並且把margin:auto。
但是對IE7以下的不兼容。和上一個方法一樣的是，如果子塊的內容太多太大，大過父元素的話，大的部分會被隱藏。

5，設置padding

demo

<div id="parent">
<div id="child">Content here</div>
</div>

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

裏頭的數值是需要自己計算的。比如說，父元素是400Px 的高度，子元素是100px的高度，我們就需要150px對於上下的padding。

150 + 150 + 100 = 400

則設置時根據百分比計算即可。
其實這裏面的padding用margin也無所謂，根據項目需要。

6，FLoat

demo

<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>

#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}

將一個空的div浮動在我們的子元素之上，並且設置它的高度寬度都是父元素的50%。就像是充滿了上半部分的父元素。

因爲有浮動，所以在子元素上我們需要clear:both,清除浮動。
子元素的上部分邊現在應該是在float層的下部分邊。爲了居中，
將子元素往上移動它的一半高度，就是例子中的100px/2=50px,所以margin-bottom: -50px;

這個方法適用於大部分瀏覽器。在使用這個方法居中的時候，必須要知道子元素的高度。

7，有關於FLEX的種種。
其實在不定寬高的垂直居中中，

{left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
position:absolute;}

比較常用，但如果涉及到FELX,
可以使用以下進行垂直居中。

#parent{
justify-content:center;
align-items:center;
display:-webit-flex;
}

但是以上對於flex的還是在IE7下不兼容哇咔咔。
所以爲了保險的話，用舊flex,

#flexbox{
display:-webkit-flex-box;
-webkit-flex-box:1;
box-pack:center;
box-align:center;
}

http://vanseodesign.com/css/vertical-centering/

• 本文部分翻譯以上鍊接