DIV塊中 元素垂直居中

1 DIV塊中 元素垂直居中

做者：知乎用戶
連接：https://www.zhihu.com/question/20543196/answer/99429177
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

block 元素

• block 元素利用絕對定位以及負外邊距，適用於知道元素的寬度和高度，兼容性好，因此會看到不少遠古時代的居中都採用這種辦法，參照下圖，注意這裏的外邊距減去的是 block 元素寬度的一半，即
  

  margin:-（width/2） px

• block 元素利用絕對定位以及 transform ，適用於不知道元素的寬度盒高度，參照下圖

• block 元素在外部的容器，利用 flex 的屬性將其設置爲下圖，則子元素 block 元素垂直居中

 

 

            <div class="login_header " style="position: relative;">

                

                    <div style=" position: absolute;top: 50%; transform: translateY(-50%); padding-left: 30px" >

                        登陸

                    </div>

            </div>

 

做者：知乎用戶
連接：https://www.zhihu.com/question/20543196/answer/99429177
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

inline 元素

• inline 元素的等內邊距，上下兩邊的內邊距相等，則中間內容居中，demo 傳送門：http://codepen.io/StevenYuysy/pen/grqPvj

• inline 元素的行高，行高與容器高度相等，則中間內容居中，demo 傳送門：http://codepen.io/StevenYuysy/pen/vGbLrR

• 若是上面的代碼都不生效的話，有可能行內元素是在表格裏面，這個時候能夠利用inline元素的 CSS 屬性 vertical-align ，默認是 baseline 屬性，將其設置爲 middle，這個屬性經常使用於 inline-level 和 table-cell 的元素。 demo傳送門：inline_vertical_demo_3

 

            <div class="login_header " style="display: table">

                

                    < span style="display: table-cell; vertical-align: middle" >  注意是行內元素，因此這裏用span，不是DIV

                        登陸

                    </span>

 

            </div>

這種辦法兼容性問題