CSS樣式 中的垂直居中法

Vertical-Align

既然有水平居中屬性text-align: center, 我們的第一反應、實現水平居中的方法應該是vertical-align: middle。

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

But !!!

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

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

這也是初學者會容易踩坑且十分困惑的一個問題。

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

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

Line-Height

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

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

當然，我們也可以不設置父級元素的高度，而是讓子元素將其撐開，同樣能達到效果。
同理，圖片和單行文本一樣，也為inline元素，也可以通過設置容器的line-height達到居中效果：

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

.content {line-height: 200px;}
#parent img {vertical-align: middle; /*調整基線位置，不是設定垂直居中哦~*/}
絕對定位 and 負 Margin
這里通過絕對定位將目標元素左上角定位在父級元素的中央位置，然后通過設定目標元素的margin屬性使其中心點與父級元素重合，適用于所有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 為負值且為自身尺寸的一半*/}
然而，使用這種方法經常會出現父級容器中的內容溢出， 所以最好在知道父級元素的寬度和高度時使用該方法。

絕對定位 and Stretching
這里通過絕對定位并設置top, bottom, right, and left 為 0 ，將目標元素拉伸至父級元素的所有 4 個邊。 再設置 margin 為 auto，使得 上下和左右 margin 相等。則實現完全的劇中效果。適用于所有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 ...

絕對定位 and transform3d
這里通過絕對定位將目標元素左上角定位在父級元素的中央位置，然后通過設定目標元素的transform3d屬性使其中心點與父級元素重合，適用于所有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); /*向左向上移動自身尺寸的一半*/}

IE 8 以下不 work ...

css3 中的 Flex 布局
將父級容器設置為 Flex 容器，并規定子項目的排列方式。詳細參見 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;

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

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