垂直居中一直是CSS布局中比較令人頭疼的問題，相比于水平居中，垂直居中對于不同的元素類型需要采取截然不同的策略，因此常常會因為策略的誤用導致無法成功居中。這篇文章總結了垂直居中的6種常見策略。

Vertical-Align

切記 vertical-align 只對 table-cell 以及 inline-element 起作用，vertical-align 的值是相對于其父元素的，父元素必須是行內元素。

對于一行文字來講，該屬性的值是相對于行高(line-height)的。

對于 table-cell，該屬性的值是相對于表格的行高的。

vertical-align 對于塊級元素不起作用，例如我們無法用它去垂直居中一個div中的p元素，因此這個方法通常不是垂直居中的最優選擇。

Line-Height 方法

這個方法適用于單行文字的垂直居中，只需要將包含文字元素的容器行高設置為大于字體大小并且等于元素的高度。默認情況下，文字上下部分會留有相同的空間，因而實現了文字的垂直居中。

html

Text here

css

#child {

line-height: 200px;

}

這種方法只適用于單行文字的垂直居中，如果需要多行文字居中，需要選擇其他方法。

使用 Line-Height 垂直居中圖片

使 line-height 可以實現圖片的垂直居中，只需要在包含圖片的父元素上設置 line-height 然后為圖片設置 vertical-align: middle。

html

css

#parent {

line-height: 200px;

}

#parent img {

vertical-align: middle;

}

CSS表格法

之前已經提到 vertical-align 適用于 table-cell, 因此可以通過將元素轉化為table來實現垂直居中。

html

Text here

css

#parent {

display: table;

}

#child {

display: table-cell;

vertical-align: middle;

}

注意這種方法的好處在于支持內容的動態改變，缺點是不支持舊版的IE瀏覽器(<=IE7)。

絕對定位和負邊距法

這種方法適用于塊級元素，需要設置元素的高度。

下面的代碼同時實現了子元素的水平和垂直居中：

html

Content here

css

#parent {

position: relative

}

#child {

position: absolute;

top: 50%;

left: 50%;

height: 30%;

width: 50%;

margin: -15% 0 0 -25%;

}

這種方法利用絕對定位先將元素的上邊界和左邊界移動到50%的位置，再根據元素的尺寸調整負邊距以達到居中的效果。

這種方法適用于所有瀏覽器，但是由于需要預先設定元素高度，因此可能出現內容超出容器的情況。

絕對定位和拉伸法

和上一種方法一樣，這種方法也需要將需要居中的元素設置絕對定位，并預先指定高度和寬度。不過在具體實現思想上有所不同。

html

Content here

css

#parent {

position: relative

}

#child {

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

height: 30%;

width: 50%;

margin: auto;

}

這個方法的原理是使子元素有拉伸到容器邊界的“趨勢”，但由于子元素設置了高寬，因此無法拉伸。同時因為設置了 margin: auto，意味著相對方向的外邊距相等，因此元素被“擠”到了容器的中央。

和上一種方法一樣，這種方法的子元素內容也可能超出容器。

上下內邊距(padding)相等法

這種方法通過設置上下padding相等來實現垂直居中。

html

Content here

css

#parent {

padding: 5% 0;

}

#child {

padding: 10% 0;

}

上面的代碼使用了相對尺寸，然而如果需要指定元素尺寸時，就需要使用絕對尺寸并做一個簡單的計算了。例如，如果指定父元素高度為400px，子元素高度為100px，要實現垂直居中需要設置父元素的上下padding為150px。

浮動元素法

這個方法的原理是利用一個空的浮動元素來控制主要內容在容器中的位置。

html

Content here

css

#parent {

padding: 5% 0;

}

#floater {

float: left;

height: 50%;

width: 100%;

margin-bottom: -50px;

}

#child {

clear: both;

height: 100px;

}

這個浮動元素可以向任意方向浮動，設置高度為50%，同時利用margin-bottom使該元素上移，上移高度為主要內容元素高度的一半。為了使內容元素移動到浮動元素下方，還需要為該元素設置 clear: both。

這種方法同樣適用于所有瀏覽器，缺點是需要提前知道內容元素的高度。

總結

以上是生活随笔為你收集整理的css 图文 上下 居中,CSS垂直居中的6种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。