Vertical-Align

既然有水平居中(zhōng)屬性text-align: center, 我(wǒ)(wǒ)們的第一(yī)反應、實現水平居中(zhōng)的方法應該是vertical-align: middle。

該屬性定義行内元素的基線相對于該元素所在行的基線的垂直對齊。在表單元格中(zhōng)，這個屬性會設置單元格框中(zhōng)的單元格内容的對齊方式.

But !!!

Vertical-align doesn’t apply to block-level elements like a paragraph inside a div.

如此可知(zhī)：這個方式确實直觀且有效，但其适用範圍僅僅限于 table cell 中(zhōng)的内容。

這也是初學者會容易踩坑且十分(fēn)困惑的一(yī)個問題。

CSS table 中(zhōng) Vertical-Align 垂直居中(zhōng)示例：

<div class="parent"> <div class="child">Content herediv> div> 
.parent {display: table;}
.child {display: table-cell;vertical-align: middle;}


Line-Height

該方法适用于單行文本(或圖片)的垂直居中(zhōng)，我(wǒ)(wǒ)們需要做的僅僅是将line-height屬性設置的大(dà)于font-size，且等于容器的高度。

<div class="content"> Text here div> 
.content{height:200px; /*不必要*/ line-height: 200px;}
當然，我(wǒ)(wǒ)們也可以不設置父級元素的高度，而是讓子元素将其撐開(kāi)，同樣能達到效果。
同理，圖片和單行文本一(yī)樣，也爲inline元素，也可以通過設置容器的line-height達到居中(zhōng)效果：

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

.content {line-height: 200px;}
#parent img {vertical-align: middle; /*調整基線位置，不是設定垂直居中(zhōng)哦~*/}

絕對定位 and 負 Margin
這裏通過絕對定位将目标元素左上角定位在父級元素的中(zhōng)央位置，然後通過設定目标元素的margin屬性使其中(zhōng)心點與父級元素重合，适用于所有block元素。
<div class="parent"> <div class="child">Content herediv> div> 
.parent {position: relative;height: 800px;}
.child {position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%; /*margin 爲負值且爲自身尺寸的一(yī)半*/}
然而，使用這種方法經常會出現父級容器中(zhōng)的内容溢出， 所以最好在知(zhī)道父級元素的寬度和高度時使用該方法。

絕對定位 and Stretching
這裏通過絕對定位并設置top, bottom, right, and left 爲 0 ，将目标元素拉伸至父級元素的所有 4 個邊。 再設置 margin 爲 auto，使得 上下(xià)和左右 margin 相等。則實現完全的劇中(zhōng)效果。适用于所有block元素。
<div class="parent"> <div class="child">Content herediv> div> 
.parent {position: relative;height: 300px;}
.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 50%;height: 30%;margin: auto;}
這種方法，在IE 8 以下(xià)不 work ...

絕對定位 and transform3d
這裏通過絕對定位将目标元素左上角定位在父級元素的中(zhōng)央位置，然後通過設定目标元素的transform3d屬性使其中(zhōng)心點與父級元素重合，适用于所有block元素。
<div class="parent"> <div class="child">Content herediv> div>

.parent {position: relative;height: 300px;}  

.child {position: absolute;top:50%;left:50%;width: 150px;height: 130px;transform:translate3d(-50%,-50%,0); /*向左向上移動自身尺寸的一(yī)半*/}

IE 8 以下(xià)不 work ...

css3 中(zhōng)的 Flex 布局
将父級容器設置爲 Flex 容器，并規定子項目的排列方式。詳細參見 Flex 布局教程
<div class="parent"> <div class="child">Content herediv> div> 
.parent {
display: flex;
display: -webkit-box;
display: -webkit-flex;

display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;

/* 子元素主軸（默認爲水平軸）上居中(zhōng)*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-pack:center;/* IE 10 */
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/

/* 子元素交叉軸（默認爲縱軸）居中(zhōng) */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-align: center;/* IE 10 */

-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
height: 300px;
}
.child{width: 150px;height: 130px;}

支持 CSS3 的浏覽器可用， 由于個浏覽器廠商(shāng)各異，導緻各種前綴眼花缭亂。