老闆的手機收到一個紅包，為什麼紅包沒居中？如何讓一個元素水平垂直居中？

2019 年 11 月 8 日
筆記

前言

老闆的手機收到一個紅包，為什麼紅包沒居中？

如何讓一個子元素在父容器里水平垂直居中？這個問題必考，在實戰開發中，也應用得非常多。

你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範，經不起千錘百鍊。換句話說：這些人也就面試的時候夸夸其談，但真的上戰場的時候，他們不敢這麼寫，也不知道怎麼寫最靠譜。

這篇文章中，我們來列出幾種常見的寫法，最終你會明白，哪種寫法是最優雅的。

當然，我還會拿出實際應用中的真實場景來舉例，讓你感受一下標準垂直居中的魅力。

如何讓一個行內元素（文字、圖片等）水平垂直居中

行內元素的居中問題比較簡單。

行內元素水平居中

給父容器設置：

    text-align: center;

行內元素垂直居中

讓文字的行高 等於 盒子的高度，可以讓單行文本垂直居中。比如：

    .father {          height: 20px;          line-height: 20px;      }

如何讓一個塊級元素水平垂直居中

這一段是本文的核心。如何讓一個塊級的子元素在父容器里水平垂直居中？有好幾種寫法。我們一起來看看。

margin: auto 的問題

在 CSS 中對元素進行水平居中是非常簡單的：如果它是一個行內元素，就對它的父容器應用 text-align: center；如果它是一個塊級元素，就對它自身應用 margin: auto或者 margin: 0 auto。

我們都知道，margin: auto相當於margin: auto auto auto auto。margin: 0 auto相當於margin: 0 auto 0 auto，四個值分別對應上右下左。其計算值取決於剩餘空間。

但是，如果要對一個元素垂直居中，margin: auto就行不通了。

比如下面這段程式碼：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Document</title>      <style>          .father{              height: 500px;              background: pink;          }          .son {              width: 300px;              height: 200px;              background: red;                margin: auto;          }      </style>  </head>  <body>      <div class="father">          <div class="son"></div>      </div>      <script></script>  </body>  </html>

上面的程式碼中，父元素和子元素都是定寬高的，即便在這種情況下，我給子元素設置 margin: auto，子元素依然沒有垂直居中。

那還有沒有比較好的通用的做法呢？

方式一：絕對定位 + margin（需要指定子元素的寬高，不推薦）

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Document</title>      <style>          * {              margin: 0;              padding: 0;          }          .father{              position: relative;              min-height: 500px;              background: pink;          }          .son {              position: absolute;              width: 200px;              height: 100px;              background: red;              top: 50%;              left: 50%;              margin-left: -100px;              margin-right: -50px;          }      </style>  </head>  <body>      <div class="father">          <div class="son">子元素的內容</div>      </div>      <script></script>  </body>  </html>

程式碼解釋：我們先讓子元素的左上角居中，然後向上移動寬度的一半(50px)，就達到了垂直居中的效果；水平居中的原理類似。

不足之處：要求指定子元素的寬高，才能寫出 margin-left和 margin-right的屬性值。

但是，在通常情況下，對那些需要居中的元素來說，其寬高往往是由其內容來決定的，不建議固定寬高。

方式二：絕對定位 + translate（無需指定子元素的寬高，推薦）

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Document</title>      <style>          * {              margin: 0;              padding: 0;          }          .father{              position: relative;              min-height: 500px;              background: pink;          }          .son {              position: absolute;              background: red;              top: 50%;              left: 50%;              transform: translate(-50%, -50%);          }      </style>  </head>  <body>      <div class="father">          <div class="son">子元素的內容</div>      </div>      <script></script>  </body>  </html>

這種寫法，在沒有指定子元素寬高的情況下，也能讓其在父容器中垂直居中。因為 translate() 函數中使用百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的（動態計算寬高）。

方式3：flex 布局（待改進）

將父容器設置為 Flex 布局，再給父容器加個屬性justify-content: center，這樣的話，子元素就能水平居中了；再給父容器加個屬性 align-items: center，這樣的話，子元素就能垂直居中了。

程式碼舉例：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Document</title>      <style>          * {              margin: 0;              padding: 0;          }          .father{              display: flex;              justify-content: center;              align-items: center;              min-height: 100vh;              background: pink;          }          .son {              background: red;          }      </style>  </head>  <body>      <div class="father">          <div class="son">子元素的內容</div>      </div>      <script></script>  </body>  </html>

上面這種寫法的，不足之處在於：給父容器設置屬性justify-content: center和align-items: center之後，導致父容器里的所有子元素們都垂直居中了（如果父容器里有多個子元素的話）。可我明明只向讓指定的某個子元素居中，要怎麼改進呢？

方式4： flex 布局 + margin: auto（推薦）

我們只需寫兩行聲明即可：先給父容器設置 display: flex，再給指定的子元素設置我們再熟悉不過的 margin: auto，即可讓這個指定的子元素在剩餘空間里，水平垂直居中。大功告成。

程式碼舉例：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Document</title>      <style>          * {              margin: 0;              padding: 0;          }          .father{              display: flex;              min-height: 100vh;              background: pink;          }          .son {              margin: auto;              background: red;          }      </style>  </head>  <body>      <div class="father">          <div class="son">子元素的內容，想水平垂直居中</div>          <div class="son2">這個元素不想水平垂直居中</div>      </div>      <script></script>  </body>  </html>

請注意，當我們給父容器使用 Flex 布局時，子元素的margin: auto不僅讓其在水平方向上居中，垂直方向上也是居中的。

參考文章：探秘 flex 上下文中神奇的自動 margin

垂直居中的典型應用場景：紅包幕簾/彈窗

問題引入

就拿「彈窗」這一點來說，現在大家的彈窗都是各種樣式、各種布局滿天飛。不過進公司後，大家在第一次寫彈窗之前，都會問一個問題：「彈窗這麼通用的東西，沒有一個規範嗎？」說完之後，又默默寫自己的有個性的彈窗去了。

建議大家在寫彈窗的時候，無論如何，一定要嚴格採用水平居中、垂直居中的寫法。

千萬不要用 margin-top 這種距離螢幕頂部的距離來計算彈窗的位置，太搓了。不要讓領導覺得：「你們寫了這麼久的前端程式碼，連個彈窗都搞不定？」

移動端，紅包幕簾/彈窗居中的規範寫法（非常標準）

移動端場景，這裡提供一個紅包幕簾/彈窗的居中寫法。注意，是嚴格居中，非常標準。為什麼是移動端？你有見過PC網頁端給你送紅包的么？

在實戰開發中，下面的這段程式碼，可以直接拿去用。注釋詳細，貼心無比。

<!DOCTYPE html>  <html lang="en">      <head>          <meta charset="UTF-8" />          <meta name="viewport" content="width=device-width, initial-scale=1.0" />          <title>Document</title>          <style>              /* 整個彈窗組件 */              .component_popup {                  position: fixed;                  top: 0;                  bottom: 0;                  left: 0;                  right: 0;                  z-index: 100;              }                /* 遮罩背景 */              .popup_mask {                  position: fixed;                  top: 0;                  bottom: 0;                  left: 0;                  right: 0;                  background: rgba(0, 0, 0, 0.7);              }                /* 彈窗區域（內容 + close）：嚴格居中 */              .popup_content {                  position: absolute;                  top: 50%;                  left: 50%;                  transform: translate(-50%, -50%);              }                /* 彈窗的內容部分 */              .content_box {                  width: 15.45rem;                  height: 19.32rem;                  background: url(http://img.smyhvae.com/20191010_1500_red-packet.png) no-repeat;                  background-size: 15.45rem 19.32rem;              }                /* 彈窗的close圖標 */              .content_close {                  width: 1.25em;                  height: 1.25em;                  background: url(http://img.smyhvae.com/20191010_1500_close.png) no-repeat;                  background-size: 1.25rem 1.25rem;                  margin: 0 auto;                  margin-top: 0.5rem;              }          </style>      </head>      <body>          <div class="content">默認文檔流中的頁面主體</div>            <div class="component_popup">              <div class="popup_mask"></div>              <div class="popup_content">                  <div class="content_box"></div>                  <div class="content_close"></div>              </div>          </div>      </body>  </html>

實現效果：

補充：

1、如果你的頁面中，有很多彈窗，建議將彈窗封裝成一個抽象組件。

2、任何彈窗，都需要解決「滾動穿透」的問題，本文篇幅有限，請自行查閱。

最後一段

有些實現方式雖然簡單，但必須要經得起千錘百鍊。我們要做到敬畏每一行程式碼，不能浮於表面。團隊開發，要的不是個性，而是標準和規範。