CSS中垂直居中的方法

廣東IT優就業

css中實現垂直居中的方法你都知道嗎？圖文帶你迅速get方法。

• line-height

line-height用於實現單行文本的垂直居中，如下圖中，我們要求單行文本垂直居中，只需要將div2設置行高line-height和height的值相同即可，也可以不用設置高度，因為單行文本的行高會撐開高度，其實二者就是一樣的值。

但是這種方法有個不足之處，那就是如果文字內容的長度大於塊的寬度時，就有一部分內容脫離了塊，因為就不再是單行文本了，所以此方法只適用於單行文本。

還有一個方法就是，如果不設置元素height的情況下，那麼本身就是元素包裹著內容，這時候只要將padding-top與padding-bottom設置為相同的值，同樣是垂直居中的效果，而且這種方法對多行文本等都通用。

• vertical-align：middle

通過設置vertical-align：middle也可以實現垂直居中，但它有以下幾種情況：

如下圖，div2中同時又inline和inline-block元素，我們沒有給div2設置高度時，它的高度由圖片的高度撐開，而且圖片和文本顯示在一行，但我們發現圖片下方有空隙，這是因為inline-block自帶vertical-align屬性，而且是默認值baseline。現在我們把vertical-align設置為middle，就會呈現出垂直居中的效果。（vertical-align屬性只對擁有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>這樣的元素是不行的。）

但是當我們給div2設置了高度之後，vertical-align：middle就不起作用了。要加上inline-height之後才可以。

當容器里只有文字沒有圖片時，還可以利用 display 和 vertical-align對容器里的文字實現垂直居中。通過將父元素的display設置為table-cell，並設置vertical-align:middle，可使其子元素均實現垂直居中，這和表格里單元格的垂直居中是類似的。

• 新增一個基準元素

在div2之前新增一個基準元素，設置它的高度等於父元素高度一半，之後再給要垂直居中的元素設置margin-top的值的大小是負的它自身高度，在設置line-height，則實現了垂直居中。

• 絕對定位實現垂直居中

因為絕對定位元素具有伸縮性，所以如果我們將絕對定位元素的width設置為auto時，同時把left與right設置為0，那麼元素就會將其相對的父元素水平填充滿。這時如果我們把高度設置為固定值，margin為auto的前提下，只要top和 bottom 的值相等（或都為0），且不超過其相對元素減去該絕對定位元素height 的一半，就可以實現垂直居中了。

更多IT精彩推薦：

月入過萬的WEB工程師是如何煉成的？http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338

廣東IT優就業