CSS中垂直置中的方法，CSS垂直置中方法

CSS中垂直置中的方法，CSS垂直置中方法

昨天總結了css中水平置中的方法，今天來總結一下css中實現垂直置中的方法。

• 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 的一半，就可以實現垂直置中了。