垂直居中一直是CSS布局中比較令人頭疼的問(wèn)題，相比于水平居中，垂直居中對(duì)于不同的元素類型需要采取截然不同的策略，因此常常會(huì)因?yàn)椴呗缘恼`用導(dǎo)致無(wú)法成功居中。這篇文章總結(jié)了垂直居中的6種常見(jiàn)策略。

Vertical-Align

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

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

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

vertical-align 對(duì)于塊級(jí)元素不起作用，例如我們無(wú)法用它去垂直居中一個(gè)div中的p元素，因此這個(gè)方法通常不是垂直居中的最優(yōu)選擇。

Line-Height 方法

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

html

Text here

css

#child {

line-height: 200px;

}

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

使用 Line-Height 垂直居中圖片

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

html

css

#parent {

line-height: 200px;

}

#parent img {

vertical-align: middle;

}

CSS表格法

之前已經(jīng)提到 vertical-align 適用于 table-cell, 因此可以通過(guò)將元素轉(zhuǎn)化為table來(lái)實(shí)現(xiàn)垂直居中。

html

Text here

css

#parent {

display: table;

}

#child {

display: table-cell;

vertical-align: middle;

}

注意這種方法的好處在于支持內(nèi)容的動(dòng)態(tài)改變，缺點(diǎn)是不支持舊版的IE瀏覽器(<=IE7)。

絕對(duì)定位和負(fù)邊距法

這種方法適用于塊級(jí)元素，需要設(shè)置元素的高度。

下面的代碼同時(shí)實(shí)現(xiàn)了子元素的水平和垂直居中：

html

Content here

css

#parent {

position: relative

}

#child {

position: absolute;

top: 50%;

left: 50%;

height: 30%;

width: 50%;

margin: -15% 0 0 -25%;

}

這種方法利用絕對(duì)定位先將元素的上邊界和左邊界移動(dòng)到50%的位置，再根據(jù)元素的尺寸調(diào)整負(fù)邊距以達(dá)到居中的效果。

這種方法適用于所有瀏覽器，但是由于需要預(yù)先設(shè)定元素高度，因此可能出現(xiàn)內(nèi)容超出容器的情況。

絕對(duì)定位和拉伸法

和上一種方法一樣，這種方法也需要將需要居中的元素設(shè)置絕對(duì)定位，并預(yù)先指定高度和寬度。不過(guò)在具體實(shí)現(xiàn)思想上有所不同。

html

Content here

css

#parent {

position: relative

}

#child {

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

height: 30%;

width: 50%;

margin: auto;

}

這個(gè)方法的原理是使子元素有拉伸到容器邊界的“趨勢(shì)”，但由于子元素設(shè)置了高寬，因此無(wú)法拉伸。同時(shí)因?yàn)樵O(shè)置了 margin: auto，意味著相對(duì)方向的外邊距相等，因此元素被“擠”到了容器的中央。

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

上下內(nèi)邊距(padding)相等法

這種方法通過(guò)設(shè)置上下padding相等來(lái)實(shí)現(xiàn)垂直居中。

html

Content here

css

#parent {

padding: 5% 0;

}

#child {

padding: 10% 0;

}

上面的代碼使用了相對(duì)尺寸，然而如果需要指定元素尺寸時(shí)，就需要使用絕對(duì)尺寸并做一個(gè)簡(jiǎn)單的計(jì)算了。例如，如果指定父元素高度為400px，子元素高度為100px，要實(shí)現(xiàn)垂直居中需要設(shè)置父元素的上下padding為150px。

浮動(dòng)元素法

這個(gè)方法的原理是利用一個(gè)空的浮動(dòng)元素來(lái)控制主要內(nèi)容在容器中的位置。

html

Content here

css

#parent {

padding: 5% 0;

}

#floater {

float: left;

height: 50%;

width: 100%;

margin-bottom: -50px;

}

#child {

clear: both;

height: 100px;

}

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。