文章作者：家園工作室研發(fā)組成員

文章出處：

CSS 居中？來一探究竟 | Wzb's Blog?wzb.me

「居中」是進行布局時最常見的需求之一了。CSS 有多種居中的方式，在什么時候挑選適合的方案？是一個值得思考的問題。

法律聲明

警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹 4.0 未本地化版本（CC BY-NC-ND 4.0） 協(xié)議發(fā)布。

這是什么？

寫在前面

本文將會按照具體場景來選擇相應(yīng)的居中方式，幫助你系統(tǒng)地理清 CSS 居中。

注意：為了簡潔，文中給出的 CSS 代碼只會給出關(guān)鍵的定義布局的代碼。

在水平方向上的居中（Horizontally Centering）

對于行內(nèi)（inline / inline-* ）元素

要將行內(nèi)元素居中，只需要給其父塊級元素（block-level parent element）定義以下 CSS 規(guī)則：

.block-level-parent-of-inline-element {text-align: center; }

這對 inline inline-block inline-table inline-flex etc. 都生效

text-align 不僅僅是針對于 text 的對齊描述，實際上，它影響的是塊級元素下的行內(nèi)元素與文本（inline contents）。

參考：text-align - CSS | MDN

對于塊級元素（block element）

要將塊級元素居中，給其定寬（width）之后定義以下 CSS 規(guī)則

.block-element {margin: 0 auto; }

如果沒有給定塊級元素寬度？那它會充滿整行，以至于不需要居中了...

就像這樣

如果有多個塊級元素？

如果你想將多個塊級元素在水平方向上居中，有以下兩種方法。

• 將多個塊級元素設(shè)置 display: inline-box; 然后給父級元素定義 text-align: center;（與上文的行內(nèi)元素居中同理）

.parent {text-align: center; } .block-elements {display: inline-block; }

• 使用 Flexbox

.parent {display: flex;justify-content: center; }

在豎直方向上的居中（Vertically Centering）

對于行內(nèi)（inline / inline-* ）元素

比如文字（text）和鏈接（links）

只有一行時

• 要讓行內(nèi)元素/文字看起來在豎直方向上的中間，可以給其定義上下相等的內(nèi)邊距（padding）

a {padding-top: 20px;padding-bottom: 20px; }

• 還有一種方案是，將文字的行高值設(shè)置與其元素高度相同。

.box {height: 60px;line-height: 60px; }

仔細思考，如果文字的內(nèi)容超過一行，或者是父級元素的大小在響應(yīng)式變化的情況下變小導致文字需要換行，會出現(xiàn)這樣的情況。

解決這個問題，只需要設(shè)置文字不換行即可

.box {height: 60px;line-height: 60px;white-space: nowarp; }

有多行文字時

• 同樣的，可以給元素設(shè)置上下相等的 padding，讓文字看起來在中間
• 將父元素定義為 display: table; 同時將子元素設(shè)置為 display: table-cell; 并且給予 vertical-align: middle; 屬性。

.box {display: table;height: 60px; }.box p {display: table-cell;vertical-align: middle; }

• 使用 Flexbox 居中

將文字放在塊級元素中，給其父元素使用 Flex

.box {display: flex;flex-direction: column;justify-content: center; }

以上效果相同，如下圖。

對于塊級（block）元素

已經(jīng)確定塊級元素的高度

在實際情況下，很少會明確地確定某一個元素的高度。如果真的能夠確定某個元素的高度，可以使用下面的方法。

.parent {position: relative; } .child {position: absolute;top: 50%;height: 100px;margin-top: -50px; }

這里需要注意的是 top 屬性的計算方法，可以參考 CSS - top | MDN。

不能確定塊級元素的高度

我們?nèi)钥梢允褂门c上例類似的方法，不過需要使用 transform 屬性。

.parent {position: relative; } .box {position: absolute;top: 50%;transform: translateY(-50%); }對于 translate 的計算方式，可以參考 Is the CSS3 transform translate percentage values relative to its width and/or height? - Stack Overflow

如果你不在乎元素撐大的話

你不在乎元素是否撐開，只想要它的內(nèi)容豎直居中，可以使用 table 或者是 CSS display 將其變成 table 行為。

main {padding: 5px;display: table; } main div {display: table-cell;vertical-align: middle; }

可見，元素被撐大了。

Flexbox

使用 Flexbox 在豎直方向上居中是同樣的方便。

.parent {display: flex;flex-direction: column;justify-content: center; }

水平和豎直方向上同時居中

你可以將上面的方法結(jié)合使用達到此目的。不過這里總結(jié)了幾種比較方便的方式。

元素確定了高度和寬度時

使用絕對定位之后，設(shè)置為負的margin屬性，其值等于 高度/寬度 的50%。

.parent {position: relative; }.child {height: 60px;width: 180px;position: absolute;top: 50%;left: 50%;margin: -30px 0 0 -90px; }

這樣進行居中的瀏覽器兼容性非常好。

不確定元素高寬

與上例相同，使用絕對定位，不過換成了 translate 屬性。

.parent {position: relative; }.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }

Flexbox

相信你已經(jīng)想到了 Flexbox 如何實現(xiàn)，只需要把主軸和側(cè)軸方向上都設(shè)置為居中就好了。

.parent {display: flex;justify-content: center;align-items: center; }

Gird

對于居中一個元素來說，可以使用 Gird 的 trick。

.parent {display: grid; } .parent div {margin: auto; }

寫在最后

現(xiàn)在你對居中的方法與選擇有了清楚的認識，你再也不怕居中了。XD

References

• Centering in CSS - CSS Tricks
• MDN
• Flex 布局教程 - 阮一峰的博客
• CSS Transforms Module Level 1 - W3C Candidate Recommendation

總結(jié)

以上是生活随笔為你收集整理的css 商城 两列_CSS 居中？来一探究竟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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