老闆的手機收到一個紅包，爲何紅包沒居中？

時間 2019-11-24

標籤老闆手機收到一個紅包爲何居中简体版

原文原文鏈接

本文做者@千古壹號。css

前言

老闆的手機收到一個紅包，爲何紅包沒居中？html

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

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

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

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

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

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

行內元素水平居中

給父容器設置：佈局

text-align: center;

複製代碼

行內元素垂直居中

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

.father {
        height: 20px;
        line-height: 20px;
    }
複製代碼

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

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

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-top: -50px; margin-left: -100px; } </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的內容</div>
    </div>
    <script></script>
</body>
</html>

複製代碼

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

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

可是，在一般狀況下，對那些須要居中的元素來講，其寬高每每是由其內容來決定的，不建議固定寬高。

方式二：絕對定位 + 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>

複製代碼