CSS居中的各類實現方式

CSS中如何完美作到居中，一直是令前端工程師頭疼的問題。最近讀到CSS-TRICKS中的一篇帖子，將居中問題的解決方案策略化。感受收穫很大，翻譯過來供你們交流學習。
當咱們書寫CSS時，讓元素居中，是抱怨的爆發點之一：爲何會這麼難？
我認爲問題的關鍵，不在於怎麼作，而在於咱們如何從諸多居中方法中選擇出適應當前情景的。
因此接下來，讓咱們一塊兒建立一顆決策樹，但願可讓居中變得簡單。

水平居中

行內元素

咱們能夠經過對其父級塊元素作以下處理來使行內元素居中。適用於inline,inline-block,inline-table,inline-flex等。

.center-children{
  text-align: center;
}複製代碼

示例：傳送門

塊級元素

咱們能夠經過將一個塊級元素的margin-left和margin-right同時設置爲auto來使其居中。（注意：此時元素必須定義有width，不然將填滿寬度，談不上水平居中。）一般由如下簡寫來定義：

.center-me {
  margin: 0 auto;
}複製代碼

示例: 傳送門

多個塊級元素

當同一行中有兩個或以上塊級元素須要居中時，咱們不得不經過改變display的類型來實現。下面的例子分別將display設置爲inline-block以及flexbox的例子。

示例: 傳送門

當你指的是多個位於同一列上的塊級元素時，將margin設爲auto的技術依舊生效。

示例: 傳送門

垂直居中

在CSS中作到垂直居中，咱們須要稍微狡猾一點。

行內元素

單行

有時行內元素或文本可以作到垂直居中，僅僅是由於元素上、下的padding相等。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}複製代碼

示例: 傳送門

在某些狀況當padding不適用，而且文字不會換行時，有一個技巧：當line-height與height相等時，文字垂直居中。

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

示例: 傳送門

多行

上下padding相等依舊能夠解決這個問題。但當此方法不生效時，多是元素或文本處於table cell中，要麼是html語義中的table，要麼是CSS中的設置。這種狀況下，咱們使用vertical-align來完成垂直居中。注意：此爲特殊用法，vertical-align平時用來處理一行中的元素如何排列。

示例: 傳送門

若是相似table的那些無效時，也許咱們應該嘗試下flexbox。 在flex中，一個子元素能夠輕易地在父元素中居中。

flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}複製代碼

示例: 傳送門

記住，這種作法僅在腹肌元素高度固定時(px, %等)纔有效。
若是上述兩種作法都無效，那麼咱們能夠採用「幽靈元素」技術。在這種作法中，一個僞元素佔據父元素的所有高度，而後文本在其中垂直居中。

.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;
}複製代碼

示例: 傳送門

塊級元素

高度已知時

因爲諸多緣由，不少狀況咱們沒法得知元素的高度，好比：當寬度變化時，文字的重繪會改變高度；文字樣式的變化可能改變高度；文字數量的變化可能改變高度；寬高比固定的元素，好比圖片，在改變大小時也會改變高度，等等。
但當咱們知道高度時，能夠按照以下方法實現垂直居中：

.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; */
}複製代碼

示例: 傳送門

高度未知時

在這種狀況下，咱們仍然能夠實現垂直居中：將元素下移父級元素的50%，再上移自身高度的50%。

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

示例: 傳送門

能夠使用flexbox時

不算什麼大的驚喜，在flexbox中，這可容易多了。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}複製代碼

示例: 傳送門

同時水平和垂直居中

咱們能夠經過結合使用前面講述的技巧來實現將元素完美居中。主要有如下三種狀況：

元素寬高固定時

此時能夠使用絕對定位將元素置於父元素(50%，50%)的位置，以後再經過將margin設置爲負值。這種方法擁有普遍的瀏覽器支持。

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}複製代碼

示例: 傳送門

元素寬高不固定時

當寬高不固定時，咱們能夠使用transform屬性來實現將元素在兩個方向同時移動50%。該寬度基於當前元素的寬度。

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

示例: 傳送門

能夠使用flexbox時

此時咱們須要使用兩個居中屬性：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}複製代碼

示例: 傳送門

補充額外一種兼容性很好的方法

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}複製代碼

結論

咱們徹底能夠在CSS中實現居中。

譯自：css-tricks.com/centering-c…