<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        水平垂直居中深入挖掘

        chokcoco

        在上篇文章 -- 一行 CSS 代碼的魅力 的最后,提到了兩種快速實現水平垂直居中的方式。

        當然,CSS 中實現水平垂直居中的方式很多。別看到水平垂直居中就準備右上角 x 掉,本文的重點不是羅列有多少種方式實現水平垂直居中方式,而是探討一下常見的幾種水平垂直居中的方式的利弊。

        嗯哼?也就是:

        • 那么多種水平垂直居中的方式,如果真的在業務中需要使用了,你腦海里第一時間會想到哪個?
        • 不同的水平垂直居中方式,它們肯定存在差異,那么最顯著的不同是什么?
        • 有沒有所謂的最完美的水平垂直居中?

        本文將討論 4 種水平垂直居中的方式,分別是,并且每個起個名字方面下面看圖:

        1. absolute: position: absolute 配合 top:50%;left:50%;transform:translate(-50%, -50%)
        2. autobot: display:flex 配合 margin:auto
        3. flex: display:flex 配合 align-items:center、justify-content:center
        4. grid: display:grid 配合 place-content:center;

        居中單個元素

        對于如下簡單的結構:

        <div class="g-container">
            <div class="sub"></div>
        </div>

        居中單個元素而言,上述 4 種方法都很好,沒有問題。

        1.png

        CodePen Demo -- Centering in CSS

        居中多個元素

        對于如下稍微復雜點的結構:

        <div class="g-container">
            <div class="sub">1</div>
            <div class="sub">123</div>
            <div class="sub">123456</div>
        </div>

        那么如果是居中多個子元素,上述 4 種方法,就能體現出明顯的不一樣。稍微也修改一下子元素,不給它設定寬度,通過 padding 撐開即可:

        .sub {
            border: 1px solid deeppink;
            padding: 10px;
            border-radius: 5px;
        }

        看看結果如何:

        2.png

        CodePen Demo -- Centering in CSS 2

        簡單分析分析:

        1. absolute 的方法明顯有問題,由于用的絕對定位,其實 3 個子元素都疊在了一起
        2. flexgrid 的方法,如果不手動添加邊距(margin 或者 gap),會貼在一起
        3. 不限制方向的話,flex 默認是水平排列,grid 是豎直排列
        4. 非常重要的一點,grid 布局下的子元素的寬度,所以子元素的寬度會被強行拉伸至最寬的一個子元素的內容的寬度

        對于多個子元素,absolute 方法明顯不適用, 接下來主要看剩余 3 個方法在一些細節上的差異。

        控制間距

        如果我們希望控制每個元素之間的間距呢?我們給 autobot、flex、grid 的容器各自加上 gap: 5px,再看看:

        .g-container{
            gap: 5px;
        }

        3.png

        CodePen Demo -- Centering in CSS 3

        1. margin: auto 由于需要均分剩余空間,所以表現并不好,無法按照我們設想的 5px 寬度進行間隔

        讓元素多到溢出

        OK,接下來,我們讓內容再多一點,多到溢出整個容器,看看有什么不一樣。

        4.png

        再來一張豎直方向排列的:

        5.png

        CodePen Demo -- Centering in CSS 4

        可以看到:

        1. 非常重要的一點,由于沒有了剩余空間,margin: auto 已經無法做到均勻分配,水平垂直居中了,而是一邊貼著容器邊,另外一邊溢出
        2. flexgrid 都做到了即便超出容器空間,依然是水平垂直居中的

        總結一下

        經由上述幾個 DEMO 可以看出來,在目前比較常用的水平垂直居中方案當中。flex 方案應該是目前而言最優的選擇,它能夠在各種環境下都保持內部元素的水平垂直居中并且不改變子元素的某些特征:

        1. 便捷的水平垂直居中單個元素
        2. 便捷的水平垂直居中多個元素,無論是橫向、豎向,亦或內容超出
        3. 非常方便控制子元素之間的間距
        4. 不會改變子元素的寬度

        當然,美中不足的是,可能相對而言,要敲多幾個字符。

        margin: autogrid 則或多或少有一些小問題。absolute 無法應付多個元素。

        最后

        本文知識點比較細,也表明 CSS 雖然簡單,但是不代表它容易。我們日常工作中用到的很多屬性其實還有很多細節可以挖掘深入。

        譬如,可以再比較下在書寫方式 writing-mode 不同的場景下,上述水平垂直居中的方式的異同,等等。

        好了,本文到此結束,希望對你有幫助 :),想 Get 到最有意思的 CSS 資訊,千萬不要錯過我的 iCSS 公眾號 ??

        QQ20210108-0.png

        更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

        如果還有什么疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

        閱讀 1.3k

        iCSS
        CSS 奇技淫巧,在這里,都有。

        坎坷切圖仔

        3.3k 聲望
        260 粉絲
        0 條評論

        坎坷切圖仔

        3.3k 聲望
        260 粉絲
        宣傳欄
        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕