Vertical-Align

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

該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式.

But !!!

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

如此可知：這個(gè)方式確實(shí)直觀且有效，但其適用范圍僅僅限于 table cell 中的內(nèi)容。

這也是初學(xué)者會(huì)容易踩坑且十分困惑的一個(gè)問(wèn)題。

CSS table 中 Vertical-Align 垂直居中示例：

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

Line-Height

該方法適用于單行文本(或圖片)的垂直居中，我們需要做的僅僅是將line-height屬性設(shè)置的大于font-size，且等于容器的高度。

.content{height:200px; /*不必要*/ line-height: 200px;}

當(dāng)然，我們也可以不設(shè)置父級(jí)元素的高度，而是讓子元素將其撐開(kāi)，同樣能達(dá)到效果。
同理，圖片和單行文本一樣，也為inline元素，也可以通過(guò)設(shè)置容器的line-height達(dá)到居中效果：

="content"> <imgsrc="image.png"alt=""/>div>

.content {line-height: 200px;}
#parent img {vertical-align: middle; /*調(diào)整基線位置，不是設(shè)定垂直居中哦~*/}
絕對(duì)定位 and 負(fù) Margin
這里通過(guò)絕對(duì)定位將目標(biāo)元素左上角定位在父級(jí)元素的中央位置，然后通過(guò)設(shè)定目標(biāo)元素的margin屬性使其中心點(diǎn)與父級(jí)元素重合，適用于所有block元素。

<divclass="parent"><divclass="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 為負(fù)值且為自身尺寸的一半*/}
然而，使用這種方法經(jīng)常會(huì)出現(xiàn)父級(jí)容器中的內(nèi)容溢出， 所以最好在知道父級(jí)元素的寬度和高度時(shí)使用該方法。

絕對(duì)定位 and Stretching
這里通過(guò)絕對(duì)定位并設(shè)置top, bottom, right, and left 為 0 ，將目標(biāo)元素拉伸至父級(jí)元素的所有 4 個(gè)邊。 再設(shè)置 margin 為 auto，使得 上下和左右 margin 相等。則實(shí)現(xiàn)完全的劇中效果。適用于所有block元素。

<divclass="parent"><divclass="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 以下不 work ...

絕對(duì)定位 and transform3d
這里通過(guò)絕對(duì)定位將目標(biāo)元素左上角定位在父級(jí)元素的中央位置，然后通過(guò)設(shè)定目標(biāo)元素的transform3d屬性使其中心點(diǎn)與父級(jí)元素重合，適用于所有block元素。

<divclass="parent"><divclass="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); /*向左向上移動(dòng)自身尺寸的一半*/}

IE 8 以下不 work ...

css3 中的 Flex 布局
將父級(jí)容器設(shè)置為 Flex 容器，并規(guī)定子項(xiàng)目的排列方式。詳細(xì)參見(jiàn) Flex 布局教程

<divclass="parent"><divclass="child">Content herediv> div> 

.parent {
display: flex;
display: -webkit-box;
display: -webkit-flex;

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

/* 子元素主軸（默認(rèn)為水平軸）上居中*/
-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*/

/* 子元素交叉軸（默認(rèn)為縱軸）居中 */
-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 的瀏覽器可用， 由于個(gè)瀏覽器廠商各異，導(dǎo)致各種前綴眼花繚亂。