CSS「奇淫巧技」之垂直居中

又是這個老生常談的問題，請問你如何實現水平垂直居中？這個問題在前端開發者的實際工做中和麪試中遇到過無數次，相信你也有本身的一套寫法，但究竟哪套方案是更好的呢，本篇文章帶你看看CSS實現垂直居中的一些「奇淫巧技」

引言

提及來哭笑不得，2013年之前，垂直居中成了CSS領域中的傳說。 垂直居中，一個及其常見的需求，一個看起來至關簡單的需求；在實踐中確實耗費心神，百般調試，尤爲是涉及尺寸不固定的元素時；過了這麼久，前端猿們琢磨出了各類各樣的方法........咱們一塊兒來「踩坑」

---

子元素定寬定高

這種的比較簡單，咱們用以下方式就能夠輕鬆的將子元素水平垂直居中：

.child{
      width: 200px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px -100px;
      background-color: bisque;
  }
複製代碼

這是很早的一種垂直居中的方法，必需要給子元素固定的寬高，這段css代碼是這樣處理的：

1. 把.child元素的左上角先放置在視口(或最近的具備相對定位的祖先元素)的正中心
2. 利用負外邊距將元素向上向左移動，移動的距離是自身寬高的一半

這其實就實現了把元素的正中心放置在視口的正中心，這段冗長的CSS代碼還能夠作下優化，利用強大的calc() 函數優化掉一行代碼:

.child{
   width: 200px;
   height: 100px;
   position: absolute;
   top: calc(50% - 50px);
   left: calc(50% - 100px);
   /* margin: -50px -100px; */
   background-color: bisque;
}
複製代碼

效果以下圖：

在實際的開發中，這種需求可能並不算多，更多的是不定寬高的元素水平垂直居中，那麼這種方法就失去效果了.......

---

子元素不定寬高

• 表格佈局法

這是比較傳統的一種佈局方式，它須要用到一些冗餘的html元素, 這裏不作過多介紹

推薦指數：☆☆

.parent{
      display: table;
      margin: 100px auto;
      width: 400px;
      height: 300px;
      background-color: aquamarine;
    }
.child{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
複製代碼

---

• 利用僞元素

我的看來這種的方式更像是一種hack手段。 推薦指數：☆☆

.parent{
      margin: 100px auto;
      width: 400px;
      height: 300px;
      background-color: aquamarine;
      text-align: center;
    }
    .parent::before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    .child{
      display: inline-block;
      vertical-align: middle;
    }
複製代碼

---

• 使用translate()變形函數

當咱們在translate()中使用百分比值時，是以這個元素本身的高度和寬度爲基準進行換算和移動的，因此咱們使用基於百分比的變形屬性來對元素進行偏移，就不須要像定寬定高的元素居中那樣把元素寬高寫死了！

推薦指數：☆☆☆☆

.parent{
      position: relative;
      margin: 100px auto;
      width: 400px;
      height: 300px;
      background-color: aquamarine;
    }
.child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: bisque;
    }
複製代碼

咱們看下效果：

如今咱們已經完美實現水平垂直居中了，但用過這個方法的你必定碰見過一些坑，咱們一塊兒踩一下：

• 有時候你可能不能使用絕對定位，由於它可能會影響你總體的佈局
• 若是你要居中的子元素高度比視口的高度還高，那它的頂部會被視口截掉，固然也有相似hack的手段去解決
• 這種也是比較常見的，在某些瀏覽器中會致使元素的顯示有些模糊，尤爲在移動端比較常見。這個問題能夠用transform-style：preserve-3d; 來修復，這種修復手段也至關於一種hack。

這個方法起源於2013年Stack Overflow的用戶，他回答了「如何使用CSS3實現垂直居中」這個問題。

---

• 基於Flexbox的解決方案

推薦指數：☆☆☆☆☆

flexbox是專門針對這類需求設計的，上面所說的一些方法可能在瀏覽器的支持程度上稍微好些，但如今瀏覽器對flexbox的支持度也是不錯的。咱們只須要少許的代碼就能夠實現：

1. 給父元素設置display:flex;
2. 給元素設置margin:auto;

.parent{
    display: flex;
    background-color: aquamarine;
}
.child{
    margin: auto;
    background-color: bisque;
}
複製代碼

完美～～～

當咱們使用flexbox時，margin:auto;不單單是水平方向將元素居中，在垂直方向也是如此

使用flexbox還能夠將文字水平垂直居中！一塊兒來看下吧～～

<div class="txt">
  前端搬運工Elvis Yang
</div>
複製代碼

.txt {
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
複製代碼

---

本文至此就結束了，但願能夠正在切圖的你有所幫助，能選擇到適合你的實現水平垂直居中的方法～～

參考書籍《CSS揭祕》