摘要：正文居中是常被開發(fā)者抱怨的問題之一。注意你不能將浮動(dòng)元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實(shí)現(xiàn)完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。

Centering in CSS: A Complete Guide
BY CHRIS COYIER ON SEPTEMBER 2, 2014

附：文中涉及到了flex的一些用法，如果沒有接觸過flex布局，建議看一下阮一峰老師的這篇指南：Flex 布局教程：語(yǔ)法篇

博客文章地址：https://guitong.github.io/blo... 顯示效果更佳。

CSS居中是常被開發(fā)者抱怨的問題之一。Why dose it have to be so hard?? They jeer. 我認(rèn)為問題不在于它實(shí)現(xiàn)起來有多難，而是有太多能夠?qū)崿F(xiàn)它的方法。在不同的情景下，如何去選擇，才是真正困惑我們的地方。

所以現(xiàn)在，讓我們來做一個(gè)決策樹，使CSS居中問題更容易解決。

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

你可以將行內(nèi)元素置于塊級(jí)父元素內(nèi)，然后用下面的CSS代碼來使其水平居中：

.center-children {
  text-align: center;
}

https://codepen.io/chriscoyie...

這種方法適用于inline，inline-block，inline-table，inline-flex等類型的元素。

它是一個(gè)塊級(jí)元素嗎？

為了居中一個(gè)塊級(jí)元素，你可以設(shè)置它的margin-left和margin-right值為auto（它的width值已給定，否則將占滿容器，也就不需要居中了）。通常簡(jiǎn)寫如下：

.center-me {
  margin: 0 auto;
}

https://codepen.io/chriscoyie...

無論我們將要居中的塊級(jí)元素或父元素的寬度如何，這都將起作用。

注意你不能將浮動(dòng)元素居中。There is a trick though.

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

如果你需要將多個(gè)塊級(jí)元素水平居中于單行，一個(gè)好的辦法是改變它們的dispaly類型。這里有兩個(gè)例子，分別使用了inline-block和 flexbox 方法實(shí)現(xiàn)：

https://codepen.io/chriscoyie...

除非你是想讓它們堆疊在一起，那么剛才使用的設(shè)置自動(dòng)外邊距值將仍然有效。

https://codepen.io/chriscoyie...

垂直居中在CSS中比較棘手。

它是行內(nèi)或類行內(nèi)元素嗎？

是單行嗎？

有時(shí)行內(nèi)／文本元素能垂直居中顯示，僅僅是因?yàn)樗鼈冇邢嗟鹊纳舷?b>padding值。

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

https://codepen.io/chriscoyie...

如果由于某些原因，設(shè)置padding的方法并不可選，而你需要居中已知不會(huì)換行的文本，有一個(gè)技巧是使其line-height值與其height值相等。

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

https://codepen.io/chriscoyie...

是多行嗎？

對(duì)于多行文本的情況，依然可以使用上下padding相等的方法使其垂直居中，但是如果這種方法失效了，可能文本所在的元素是一個(gè)table cell，不管是通過字面量定義的還是通過CSS定義的。（紅葉注：這里的意思就是該元素可以是直接使用表格標(biāo)簽聲明，也可以是為元素設(shè)置display:table-cell;屬性而使其成為一個(gè)table cell，父元素設(shè)置display:table; ）。如果是文本在這樣的元素內(nèi)，該元素默認(rèn)有CSS屬性vertical-align:middle;，所以不需要我們顯示地設(shè)置。然而，如果你是手動(dòng)更改CSS使其成為table cell元素的，就需要顯示地加入這個(gè)屬性vertical-align:middle;。

(More on that.)

下面的例子非常清晰地展示了這種方法：

https://codepen.io/chriscoyie...

如果你不喜歡或者這種方法也不好使，也許你可以用flexbox？單個(gè)子flex元素可以非常輕松地在父flex元素內(nèi)垂直居中。

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

https://codepen.io/chriscoyie...

但是要記住，上面的討論都是基于元素父容器有一個(gè)固定的高度（px，%，etc）。

如果這些方法都無法實(shí)現(xiàn)，你可以采用“ghost element”技術(shù)，將一個(gè)全高度的偽元素將放置于容器中，文本將與其垂直對(duì)齊。

.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;
}

https://codepen.io/chriscoyie...

它是一個(gè)塊級(jí)元素嗎？

知道元素的高度嗎？

不知道網(wǎng)頁(yè)布局的高度是相當(dāng)常見的，有很多原因：如果文本的寬度改變，那么重布局時(shí)高度就會(huì)改變；文本樣式的改變會(huì)改變高度；文本數(shù)量改變會(huì)改變高度；具有固定縱橫比的元素（如圖像），會(huì)在尺寸改變時(shí)影響高度。Etc。

但是如果你明確地知道高度，可以像這樣使其垂直居中：

.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; */
}

https://codepen.io/chriscoyie...

未知元素高度？

沒關(guān)系。你仍然可以使用類似上面的方法使其居中。先將其絕對(duì)定位至父元素半高位置，再提升自身半高距離即可。

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

https://codepen.io/chriscoyie...

~~> Can you use flexbox?

你可以使用flexbox嗎？

如果可以，那就相當(dāng)簡(jiǎn)單了。

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

https://codepen.io/chriscoyie...

你可以將前面的方法任意組合起來，實(shí)現(xiàn)完美的居中效果。但是我發(fā)現(xiàn)通常可以將其分為三類：

元素有固定的寬度和高度嗎？

先將元素絕對(duì)定位至50%／50%位置，然后加入負(fù)margin值，使該值等于高度和寬度的一半（注：元素如果有padding要記得計(jì)算進(jìn)去，參考下例）。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。

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

https://codepen.io/chriscoyie...

元素的寬度與高度未知？

如果你不知道該元素的寬高，可以將它的transform屬性設(shè)置為translate(-50%, -50%)。也可以達(dá)到相同的效果。

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

https://codepen.io/chriscoyie...

你可以使用flexbox嗎？

在水平和垂直兩個(gè)方向上居中元素，你需要用到flex的兩個(gè)屬性：

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

https://codepen.io/chriscoyie...

這是一個(gè)小技巧，對(duì)單個(gè)元素來說非常有效：

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

https://codepen.io/chriscoyie...

You can totally center things in CSS !!!