使用 CSS 實(shí)現(xiàn)居中效果困難嗎？顯然不是。實(shí)際上有許多方法可以實(shí)現(xiàn)居中效果，但在具體情況中，我們往往無(wú)法判斷哪種方法最合適。

所以讓我們來(lái)創(chuàng)建一個(gè)層次結(jié)構(gòu)的方法集，幫助你解決選擇困難癥~

水平居中

行內(nèi)或類(lèi)行內(nèi)元素（比如文本和鏈接）

在塊級(jí)父容器中讓行內(nèi)元素居中，只需使用 text-align: center;：

這種方法可以讓 inline/inline-block/inline-table/inline/flex 等類(lèi)型的元素實(shí)現(xiàn)居中。

塊級(jí)元素

讓塊級(jí)元素居中的方法就是設(shè)置 margin-left 和 margin-right 為 auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度，否則塊級(jí)元素的寬度會(huì)被拉伸為父級(jí)容器的寬度）。常見(jiàn)用法如下所示：

.center-me {
  margin: 0 auto;
}

無(wú)論父級(jí)容器和塊級(jí)元素的寬度如何變化，都不會(huì)影響塊級(jí)元素的居中效果。

請(qǐng)注意，float 屬性是不能實(shí)現(xiàn)元素居中的。如果你想知道使用 float 實(shí)現(xiàn)居中的非常規(guī)方案，可以參考這篇文章。

有關(guān)于水平居中更多實(shí)現(xiàn)方法，可以參閱早期整理的一篇博客《六種實(shí)現(xiàn)元素水平居中》

多個(gè)塊級(jí)元素

如果要讓多個(gè)塊級(jí)元素在同一水平線(xiàn)上居中，那么可以修改它們的 display 值。這里有兩個(gè)示例，其中一個(gè)使用了 inline-block 的顯示方式，另一個(gè)使用了 flexbox 的顯示方式：

如果你想讓多個(gè)垂直堆棧的塊元素，那么仍然可以通過(guò)設(shè)置 margin-left 和 margin-right 為 auto 來(lái)實(shí)現(xiàn)：

垂直居中

使用 CSS 實(shí)現(xiàn)垂直居中需要一些技巧。

行內(nèi)或類(lèi)行內(nèi)元素（比如文本和鏈接）

單行

對(duì)于單行行內(nèi)或者文本元素，只需為它們添加等值的 padding-top 和 padding-bottom 就可以實(shí)現(xiàn)垂直居中：

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果因?yàn)槟承┰蛭覀儾荒苁褂?padding 屬性來(lái)實(shí)現(xiàn)垂直居中，而且已知文本不會(huì)換行，那么就可以讓 line-height 和 center 相等，從而實(shí)現(xiàn)垂直居中：

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行

對(duì)于多行文本，同樣可以使用等值 padding-top 和 padding-bottom 的方式實(shí)現(xiàn)垂直居中。如果你在使用過(guò)程中發(fā)現(xiàn)這種方法沒(méi)見(jiàn)效，那么你可以通過(guò) CSS 為文本設(shè)置一個(gè)類(lèi)似 table-cell 的父級(jí)容器，然后使用 vertical-align 屬性實(shí)現(xiàn)垂直居中：

此外，你還可以使用 flexbox 實(shí)現(xiàn)垂直居中，對(duì)于父級(jí)容器為 display: flex 的元素來(lái)說(shuō)，它的每一個(gè)子元素都是垂直居中的：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

值得注意的是，上述方法只適用于父級(jí)容器擁有確定高度的元素。

如果上述方法都不起作用，那么你就需要使用被稱(chēng)為幽靈元素（ghost element）的非常規(guī)解決方式：在垂直居中的元素上添加偽元素，設(shè)置偽元素的高等于父級(jí)容器的高，然后為文本添加 vertical-align: middle; 樣式，即可實(shí)現(xiàn)垂直居中。

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

塊級(jí)元素

已知元素的高度

無(wú)法獲知元素的具體高度是非常常見(jiàn)的一種狀況，比如：視區(qū)寬度變化，會(huì)觸發(fā)布局重繪，從而改變高度；對(duì)文本施加不同的樣式會(huì)改變高度；文本的內(nèi)容量不同會(huì)改變高度；當(dāng)寬度變化時(shí)，對(duì)于寬高比例固定的元素（比如圖片），也會(huì)自動(dòng)調(diào)整高度……

如果我們知道元素的高度，可以這樣來(lái)實(shí)現(xiàn)垂直居中：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

未知元素的高度

如果我們不知道元素的高度，那么就需要先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實(shí)現(xiàn)垂直居中：

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

flexbox

使用 flexbox 實(shí)現(xiàn)垂直居中非常簡(jiǎn)單：

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

水平且垂直居中

通過(guò)組合水平居中和垂直居中的技巧，可以實(shí)現(xiàn)非常完美的居中效果。我覺(jué)得可以將它們分為三種類(lèi)型：

寬高固定元素

設(shè)定父級(jí)容器為相對(duì)定位的容器，設(shè)定子元素絕對(duì)定位的位置 position: absolute; top: 50%; left: 50%，最后使用負(fù)向 margin 實(shí)現(xiàn)水平和垂直居中，margin 的值為寬高（具體的寬高需要根據(jù)實(shí)際情況計(jì)算 padding）的一半。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

寬高不固定元素

如果無(wú)法獲取確定的寬高，同樣需要設(shè)定父級(jí)容器為相對(duì)定位的容器，設(shè)定子元素絕對(duì)定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下來(lái)需要使用 transform: translate(-50%, -50%); 實(shí)現(xiàn)垂直居中：

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

使用 transform 有一個(gè)缺陷，就是當(dāng)計(jì)算結(jié)果含有小數(shù)時(shí)（比如 0.5），會(huì)讓整個(gè)元素看起來(lái)是模糊的，一種解決方案就是為父級(jí)元素設(shè)置 transform-style: preserve-3d; 樣式：

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

flexbox

使用 flexbox 實(shí)現(xiàn)水平和垂直居中，只需使用兩條居中屬性即可：

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

結(jié)論

你看，使用 CSS 可以讓任何元素實(shí)現(xiàn)居中效果。

本文根據(jù)@Chris Coyier的《Centering in CSS: A Complete Guide》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或有不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：https:///centering-css-complete-guide/。