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

来源:https://www.cnblogs.com/qianguyihao/archive/2019/11/08/11823496.html

前言 老闆的手機收到一個紅包,為什麼紅包沒居中? 如何讓一個子元素在父容器里 水平垂直居中 ?這個問題必考,在實戰開發中,也應用得非常多。 你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範,經不起千錘百煉。換句話說:這些人也就面試的時候誇誇其談,但真的上戰場的時候,他們不敢這麼寫,也不知道怎 ...


前言

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

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

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

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

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

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

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

行內元素水平居中

給父容器設置:

    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 automargin: 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-leftmargin-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: centeralign-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、任何彈窗,都需要解決“滾動穿透”的問題,本文篇幅有限,請自行查閱。

最後一段

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

參考鏈接


您的分享是我們最大的動力!

更多相關文章
  • 統計信息概念 MySQL統計信息是指資料庫通過採樣、統計出來的表、索引的相關信息,例如,表的記錄數、聚集索引page個數、欄位的Cardinality....。MySQL在生成執行計劃時,需要根據索引的統計信息進行估算,計算出最低代價(或者說是最小開銷)的執行計劃.MySQL支持有限的索引統計信息,... ...
  • 1.序列 設置主鍵自增 (1)創建t_user表 create table t_user( id number, name varchar2(10) ); (2)自增設置create sequence my_seq increment by 1 start with 1 (3)序列第一次使用必須使用 ...
  • 在上篇筆記中,為車輛信息表、車輛耗損表以及車輛營收表插入了一些數據。之後便是查詢了,重點也在查詢……按照之前定好的數據結構,如果是查詢mongodb document的最外層比較簡單,但是我們的重點應該是FormItems表單項集合中的表單項,對他們進行查詢、統計等。根據插入的數據,我寫了一個查詢: ...
  • --查詢資料庫鎖表記錄 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked_mode from v$locked_object lo, dba_objects ao ...
  • begin try 語句 end trybegin catch --ERROR_NUMBER() 返回錯誤號。 --ERROR_SEVERITY() 返回嚴重性。 --ERROR_STATE() 返回錯誤狀態號。 --ERROR_PROCEDURE() 返回出現錯誤的存儲過程或觸發器的名稱。 --E ...
  • 跨平臺開發是當下最受歡迎、應用最廣泛的框架之一。能實現跨平臺開發的框架也五花八門,讓人眼花繚亂。最流行的跨平臺框架有 Xamarin、PhoneGap、Ionic、Titanium、Monaca、Sencha、jQuery Mobile、React native、Flutter 等等。但這些工具的表 ...
  • 效果圖 修改思路 1、增加全局控制變數 sys.launcher3.is_full_app ,用來動態切換 2、增加兩套佈局,對應有抽屜和無抽屜 3、去除 allAppsButton 4、將 AllAppsContainerView 中的圖標載入到 Workspace 5、新安裝的 app 自動添加 ...
  • 一、父組件向子組件傳遞數據 1、首先形成父子組件關係 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> ...
一周排行
  • C#中的DefaultView方法 簡介: 首先可建立一個表,對錶進行填充若幹條數據,代碼如下: //創建Table1 DataTable dt = new DataTable(); //對Table1添加列名,並設置列值類型 DataTable dt1 = new DataTable();//創建 ...
  • 1、運行程式報錯: FailFast: Couldn't find a valid ICU package installed on the system. 解決方法: yum install icu -y 2、程式運行後,本地可以訪問,但其他機器無法訪問,需要開放埠 firewall-cmd - ...
  • 只是一個Demo,所用有很多功能也沒有添加進去如分頁,輸入驗證,頁面也沒有進行精心佈局。 整體先來幾張圖解 ...
  • Core提供二種開發模式:Core Pages和Core MVC,今天介紹的是Core MVC。 1、創建web MVC項目 新建service/h_r.baseservice類庫文件、data/h_r.efdata類庫文件、common/h_r.common類庫文件。 引入需要的CSS文件和JS文 ...
  • 學習網址:https://docs.microsoft.com/zh-cn/visualstudio/get-started/visual-studio-ide?view=vs-2019 示範 vs2019: 變數的重命名的重構,更改該變數命名的同時,引用該變數的地方也會更改,如果該變數有被反射用到 ...
  • 1、在data裡面新建個Entity文件用於存放表映射,設計資料庫,執行如下語句 Scaffold-DbContext -Force "server=.;user=sunyong;password=1qaz!QAZ;database=hr;" Microsoft.EntityFrameworkCor ...
  • 1、發送郵件類,百度一大堆,這裡用的也是直接百度拿過來的 public static bool get_send_email(email email, string Title, string Body) { MailMessage mailMsg = new MailMessage(); mail ...
  • 1、添加用戶列表控制器,用於用戶列表顯示,登錄,增刪改查,郵件發送,下載 public userlistController(MainDbContext _db, ILogger<operatorlog> _logger, IOptions<email> sendMail) { db = _db; ...
  • 1、用戶列表頁面 @{ Layout = Layout = null;}<table id="datalistuser" class="easyui-datagrid" url="/userlist/getuserlist" toolbar="#toolbaruser" rownumbers="tr ...
  • 1、引用包 Microsoft.EntityFrameworkCore.Tools Microsoft.EntityFrameworkCore.SqlServer Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation Microsoft.AspNetCo ...