CSS居中完整指南

2021-08-17 08:22:01 字數 3406 閱讀 2308

使用 css 實現居中效果困難嗎?顯然不是。實際上有許多方法可以實現居中效果,但在具體情況中,我們往往無法判斷哪種方法最合適。

所以讓我們來建立乙個層次結構的方法集,幫助你解決選擇困難症~

在塊級父容器中讓行內元素居中,只需使用text-align: center;

這種方法可以讓inline/inline-block/inline-table/inline/flex等型別的元素實現居中。

讓塊級元素居中的方法就是設定margin-leftmargin-rightauto(前提是已經為元素設定了適當的width寬度,否則塊級元素的寬度會被拉伸為父級容器的寬度)。常見用法如下所示:

.center-me

無論父級容器和塊級元素的寬度如何變化,都不會影響塊級元素的居中效果。

請注意,float屬性是不能實現元素居中的。如果你想知道使用float實現居中的非常規方案,可以參考這篇文章。

有關於水平居中更多實現方法,可以參閱早期整理的一篇部落格《六種實現元素水平居中》

如果要讓多個塊級元素在同一水平線上居中,那麼可以修改它們的display值。這裡有兩個示例,其中乙個使用了inline-block的顯示方式,另乙個使用了flexbox的顯示方式:

如果你想讓多個垂直堆疊的塊元素,那麼仍然可以通過設定margin-leftmargin-rightauto來實現:

使用 css 實現垂直居中需要一些技巧。

單行對於單行行內或者文字元素,只需為它們新增等值的padding-toppadding-bottom就可以實現垂直居中:

.link

如果因為某些原因我們不能使用padding屬性來實現垂直居中,而且已知文字不會換行,那麼就可以讓line-heightcenter相等,從而實現垂直居中:

.center-text-trick

多行對於多行文字,同樣可以使用等值padding-toppadding-bottom的方式實現垂直居中。如果你在使用過程中發現這種方法沒見效,那麼你可以通過 css 為文字設定乙個類似table-cell的父級容器,然後使用vertical-align屬性實現垂直居中:

此外,你還可以使用flexbox實現垂直居中,對於父級容器為display: flex的元素來說,它的每乙個子元素都是垂直居中的:

.flex-center-vertically

值得注意的是,上述方法只適用於父級容器擁有確定高度的元素。

如果上述方法都不起作用,那麼你就需要使用被稱為幽靈元素(ghost element)的非常規解決方式:在垂直居中的元素上新增偽元素,設定偽元素的高等於父級容器的高,然後為文字新增vertical-align: middle;樣式,即可實現垂直居中。

.ghost-center

.ghost-center

::before

.ghost-center

p

已知元素的高度

無法獲知元素的具體高度是非常常見的一種狀況,比如:視區寬度變化,會觸發布局重繪,從而改變高度;對文字施加不同的樣式會改變高度;文字的內容量不同會改變高度;當寬度變化時,對於寬高比例固定的元素(比如),也會自動調整高度……

如果我們知道元素的高度,可以這樣來實現垂直居中:

.parent

.child

未知元素的高度

如果我們不知道元素的高度,那麼就需要先將元素定位到容器的中心位置,然後使用transformtranslate屬性,將元素的中心和父容器的中心重合,從而實現垂直居中:

.parent

.child

flexbox

使用flexbox實現垂直居中非常簡單:

.parent

通過組合水平居中和垂直居中的技巧,可以實現非常完美的居中效果。我覺得可以將它們分為三種型別:

設定父級容器為相對定位的容器,設定子元素絕對定位的位置position: absolute; top: 50%; left: 50%,最後使用負向margin實現水平和垂直居中,margin的值為寬高(具體的寬高需要根據實際情況計算padding)的一半。

.parent

.child

如果無法獲取確定的寬高,同樣需要設定父級容器為相對定位的容器,設定子元素絕對定位的位置position: absolute; top: 50%; left: 50%。不同的是,接下來需要使用transform: translate(-50%, -50%);實現垂直居中:

.parent

.child

使用transform有乙個缺陷,就是當計算結果含有小數時(比如0.5),會讓整個元素看起來是模糊的,一種解決方案就是為父級元素設定transform-style: preserve-3d;樣式:

.parent-element

.element

使用 flexbox 實現水平和垂直居中,只需使用兩條居中屬性即可:

.parent

你看,使用 css 可以讓任何元素實現居中效果。

著作權歸作者所有。

原文: 

w3cplus.com

CSS居中完整指南

使用 css 實現居中效果困難嗎?顯然不是。實際上有許多方法可以實現居中效果,但在具體情況中,我們往往無法判斷哪種方法最合適。所以讓我們來建立乙個層次結構的方法集,幫助你解決選擇困難症 在塊級父容器中讓行內元素居中,只需使用text align center 這種方法可以讓inline inline...

在CSS中水平居中和垂直居中 完整的指南

一 水平居中 1.行內元素水平居中 2.block元素水平居中 3.多個塊級元素水平居中 二 垂直居中 1.行內元素水平居中 2.block元素水平居中 3.用flexbox 三 水平和垂直居中 1.元素是都有定寬定高 2.元素寬高不定 3.用flexbox 了解了文章的架構,就讓我們追條擊破!一 ...

居中的css 完全指南 翻譯

譯自 對於行內元素可以使用如下實現水平居中 blocklist1 1這種方法對於inline,inline block,inline table等都有效。對於乙個塊元素,可以設定其margin left和margin right自動 blocklist1 2 div1無論塊元素的寬度是否已知,都可以...