CSS制作水平垂直居中對齊多種方式各有千秋

2024-07-11 08:28:23

字體：大中小

來源：轉載

供稿：網友

作為前端攻城師，在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱。這段時間，我收集了幾種不同的方式制作垂直居中方法，但每種方法各有千秋呀，要正確的選擇也是一件不容易的事情。我會將這幾種方法一一介紹給大家，以供大家參考。或許對于我這樣的初學者有一定的幫助。

用CSS來實現元素的垂直居中效果是件苦差事，雖然說實現方法有多種，但有很多方式在某些瀏覽器下可能無法正常的工作。接下來我們就一起來看看這些不同方法實現垂直居中的各自優點和其不足之處。

方法一：

這種方法用來實現單行垂直居中是相當的簡單的，你只要保證元素內容是單行，并且其高度是固定不變的，你只要將其“line-height”設置成和“height”值一樣就Ok了。不過這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。
Html Markup

復制代碼

代碼如下:
<div class="vertical">content</div>

CSS Code:

復制代碼

代碼如下:
.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}

優點：

適合在所有瀏覽器，沒有足夠空間時，內容不會被切掉

缺點：

僅適合應用在文本和圖片上，并且這種方法，當你文本不是單行時，效果極差，差到讓你感到惡心。

這種方法對運用在小元素上是非常有用的，比如說讓一個button、圖片或者單行文本字段。

方法二：

這種方法將在需要給容器設置絕對定位（position:absolute）,并且定位高度（top:50%）和margin-top為高度的一半（margin-top:-height/2）。這就意味著使用這種方法來實現垂直居中的效果，那么元素必須要有一個固定的高度。這樣一來，你給元素設置了固定高度，如果你又給他設置了“overflow:auto”，那么當元素內容超過容器后，這樣元素的就會出現滾動，而不會自適應內容的高度。

HTML Markup

復制代碼

代碼如下:
<div class="vertical">content</div>

CSS Code

復制代碼

代碼如下:
.vertical {
height: 100px;/*元素的高度*/
position: absolute;
top: 50%;/*元素的頂部邊界離父元素的的位置是父元素高度的一半*/
margin-top: -50px;/*設置元素頂邊負邊距，大小為元素高度的一半*/
}

優點：

能在各瀏覽器下工作，結構簡單明了，不需增加額外的標簽

上一篇：Google瀏覽器CSS居中兼容問題完美解決方法

下一篇：CSS實現段落首行縮進兩個字符不再使用空格