CSS之水平垂直居中

時間 2019-12-17

標籤 css 水平垂直居中欄目 CSS 简体版

原文原文鏈接

在css的世界裏，若是咱們想讓一個塊級元素水平居中，想必你們都知道利用margin:0 auto;嘛，這樣就可讓塊級元素在它的父元素中水平居中了。css

列如這樣：html

<!DOCTYPE html>
    <head>
        <title>center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            .parent {
                width:50%;
                height:100px;
                border:1px solid black;
                position:relative;
            }
            .child {
                margin:0 auto;
                width:50px;
                height:50px;
                background:#22B14C;
            }    
        </style>
    </head>
    <body>
        <div class="parent">
               <div class="child">
             
            </div>
        </div>
    </body>
</html>

View Code

運行效果圖以下，綠色方塊水平居中於它的父元素web

咦，那麼問題來了，咱們想要綠色方塊垂直居中或者水平垂直居中呢？瀏覽器

是否是隻要設置margin:auto 0;或margin:auto;就能夠了呢？ide

曾經我也是這麼覺得的，由於設置margin:0 auto;能夠水平居中嘛。佈局

可是垂直居中就不是這麼回事啦。ui

在普通文檔流中，假若你設置margin:auto，其實瀏覽器解析時，會理解爲margin:0 auto;spa

（將margin-top和margin-bottom設置爲0，而margin-left和margin-right設置爲左右自適應）。3d

摘自W3.orgcode

若是你心存顧慮，能夠將上面demo中的margin:0 auto;換成margin:auto;，運行後的結果是同樣的。

咦，那若是咱們如今想讓塊級元素垂直居中呢，如何處理？

方法一：

將元素設置爲絕對定位absolute，這樣就可讓元素脫離普通文檔流，且absolute有一特性：會將元素的display設置爲block。

而後，再設置絕對定位的座標(left,top,right,bottom)爲0，這樣會使瀏覽器爲絕對定位包裹一層新的盒子模型。

再結合margin，就能夠你想水平居中(margin:0 auto;)就居中，垂直居中(margin:auto 0;)就居中了，水平垂直居中(margin:auto;)也完美。

下面列舉的demo爲‘水平垂直居中’：

<!DOCTYPE html>
    <head>
        <title>center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            .parent {
                width:50%;
                height:100px;
                border:1px solid black;
                position:relative;
            }
            .child {
                margin: auto;
                position: absolute;
                top:0;
                left:0;
                bottom:0;
                right:0;
                width:50px;
                height:50px;
                background:#22B14C;
            }    
        </style>
    </head>
    <body>
        <div class="parent">    
               <div class="child">
             
            </div>
        </div>
    </body>
</html>

View Code

PS：position:fixed也能夠脫離文檔流，so它和absolute是同樣兒滴，區別就是fixed是相對於瀏覽器窗口進行定位的。

方法二：

方法一是經過改變元素的文檔流，那麼除開改變它的文檔流呢？

那咱們就另闢蹊徑，計算元素的寬高嘛。

麼子意思？

以‘垂直居中’舉例，假若咱們有個子元素child，須要垂直居中於它的父元素parent。以下：

　　　　　　　　　　　　　圖一

那麼首先咱們得將子元素child以父元素的頂點(top,left=0 如上圖所示)，往下和右移動父元素寬高的50%；以下圖所示：

　　　　　　　　　　　　　圖二

再將子元素Child以parent中心點，往上和左移動自身元素寬高的50%，就垂直居中啦，以下圖所示：

　　　　　　　　　　　　　圖三

好了，這個流程咱們是理清楚了，那用CSS應該怎麼實現呢？

列舉2個:

（1）、 margin + absolute

設置child爲absolute，將其top、right皆爲50%，那麼就使得子元素層顯上圖圖二的狀況；

再將元素的margin-top，margin-right設置爲-50%，那麼就能夠實現垂直居中啦。

示例代碼以下：

<!DOCTYPE html>
    <head>
        <title>center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            .parent {
                width:50%;
                height:100px;
                border:1px solid black;
                position:relative;
            }
            .child {
                position:absolute;
                width:50px;
                height:50px;
                top:50%;
                left:50%;
                margin-top:-25px;
                margin-left:-25px;
                background:#22B14C;
            }         
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">
                 
            </div>
        </div>
    </body>
</html>

View Code

注：margin的百分比值參照其包含塊的寬度進行計算的。

      另外默認瀏覽器通常默認writing-mode:horizontal-tb和direction:ltr，即橫向排版，因此margin不管寬高設置百分比時，都會以父元素的width進行計算。縱向嘛就是以父元素的height進行計算咯。
      PS:若是你想縱向排版能夠這麼設置
      #demo{
          　　　　/*for browsers of wekit engine*/
         　　　　 -webkit-writing-mode: vertical-rl ；
         　　　　/*for ie*/
        　　　　 writing-mode: tb-rl;
      }
      因此方法二中用margin+absolute讓子元素居中時，margin必需要知道子元素的寬高，切忌不能用百分比。

（2）、 translate + absolute

設置child爲absolute，將其top、right皆爲50%，那麼就使得子元素層顯上圖圖二的狀況；

再經過translate將元素移動50%,50%，也能夠獲得圖三，實現垂直居中。

示例代碼以下：

<!DOCTYPE html>
    <head>
        <title>center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            .parent {
                width:50%;
                height:100px;
                border:1px solid black;
                position:relative;
            }
            .child {
                position:absolute;
                width:50px;
                height:50px;
                top:50%;
                left:50%;
                <!--漸進加強-->
                -webkit-transform: translate(-50%,-50%);
                    -ms-transform: translate(-50%,-50%);
                        transform: translate(-50%,-50%);
                background:#22B14C;
            }         
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">
                 
            </div>
            
        </div>
    </body>
</html>

View Code

方法三：

利用table-cell屬性就能夠輕鬆實現。

將父元素變爲table-cell，從而可使用table的屬性vertical-align:middle，使元素垂直居中，再將子元素margin:0 atuo;就能夠實現水平居中咯。

PS：table-cell必須包含在display:table元素中，table-cell是屬於table滴嘛。

示例代碼以下：

<!DOCTYPE html>
    <head>
        <title>center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            .root {
                width:50%;
                height:100px;
                border:1px solid black;
                display:table;
            }
            .parent {
                display:table-cell;
                vertical-align:middle;
            } 
            .child {
                width:50px;
                height:50px;
                background:#22B14C;
                margin:0 auto;
            }            
        </style>
    </head>
    <body>
        <div class="root">
            <div class="parent">
                 <div class="child"></div>
            </div>
        </div>
    </body>
</html>