做頁面時經(jīng)常會碰到垂直居中問題，下面幾種方法可以根據(jù)不同場合選著相對應(yīng)的合適的方法來使用。
-
實現(xiàn)單行文字垂直居中，設(shè)置
line-height等于height；（也可以說把line-heihgt設(shè)置為你需要的box的大小可以實現(xiàn)單行文字的垂直居中）
-
實現(xiàn)高度不固定的多行文字垂直居中，設(shè)置上下padding相等；
圖中高度是隨著內(nèi)容的變化而變化。
缺點：如果要實現(xiàn)一個彈窗，當(dāng)你點擊一個按鈕的時候頁面上出現(xiàn)了一個彈框，這時彈窗會出現(xiàn)在頁面的中心位置如(圖二)。而彈窗的位置是由它的容器來決定的，它的容器是可變的，即容器的高度是可變化的；但是圖一中的高度是無所謂的，它只需要上下的縫隙相等即可，而它的高度是由內(nèi)容來撐開的。要實現(xiàn)圖二居中場景可以用下面的絕對定位的方法。
-
絕對定位實現(xiàn)（圖二場景）垂直居中
給圖二dialog容器設(shè)置如下步驟：
設(shè)置1：
給容器設(shè)置絕對定位
position: absolute
設(shè)置2
left: 50%; // 50%是父容器的50%;
效果：會平移父容器的一半；
設(shè)置3：
margin-left: (容器本身寬度的一半)，// 注意一定要設(shè)置為負數(shù)；
效果：這時容器會在父容器中水平居中；
設(shè)置4：
top: 50%; //是父容器的50%；
效果： 會平移父容器的一半，不過是容器的左上角在父容器的中心位置。要想容器整體在父容器中垂直居中，需要第四步。
設(shè)置5：
marign-top: (容器本身高度的一半); // 注意要用負數(shù)哦；
這時就會實現(xiàn)圖三效果
注意：當(dāng)這個元素的高度或者寬度不是固定的時候，那么margin-left和 margin-top的值就會無法確定，此種方法就會無法實現(xiàn)圖二垂直居中效果。
不過可以用css3中的屬性：transform: translate(-50%， -50%)；來實現(xiàn)如(圖四)，使用這個屬性的話，不管高度或者寬度是多少都可以實現(xiàn)居中（但此屬性在低版本中不能用）。
-
vertical-align實現(xiàn)居中
vertical-align: middle；必須要作用在行內(nèi)元素和表格上才生效；（如果是一個表格table里面的table-cell，給它加一個vertical-align: middle; 那么表格里面的內(nèi)容文字就會垂直居中。如果是一個行內(nèi)元素，比如文字，給它加一個vertical-align: middle; 那么文字之間就會相對于基線來對其；如圖：
）
另外圖片和文字垂直居中，如下圖：
下面可以利用vertical-align: middle;的特性實現(xiàn)圖五效果，讓一個圖片在一個固定寬高的盒子中垂直居中：
實現(xiàn)：
方法2
-
使用table-cell實現(xiàn)垂直居中
這種方法只需要把父容器用display: table-cell; 來實現(xiàn)，這樣的話就相當(dāng)于這個元素像一個表格一樣來渲染里面的內(nèi)容，如下圖：
缺點： 把塊級元素用display: table-cell;來展現(xiàn)，改變了塊級元素的展現(xiàn)方式。
文章著作權(quán)歸饑人谷_sunny和饑人谷所有，轉(zhuǎn)載須說明來源
