淺析水平垂直居中(CSS)

淺析水平垂直居中

目錄

• 淺析水平垂直居中
• 1.利用定位實現水平垂直居中
• 2.利用定位和外邊距margin實現水平垂直居中
• 3.利用定位加平移實現水平垂直居中
• 4.利用表格屬性實現水平垂直居中
• 5.利用vertical-align屬性實現水平垂直居中
• 6.利用vertical-align屬性實現水平垂直居中（2）
• 7.彈性盒實現水平垂直居中
• 8.網格佈局grid佈局實現水平垂直居中（gird網格佈局還未發展完善，兼容性差。）

咱們在平常網頁編輯中，能夠很簡單的實現元素水平居中，可是難以作到元素水平垂直居中，本文簡單的介紹了幾種經常使用的水平居中方法。

1.利用定位實現水平垂直居中

實現原理：父元素給上相對定位做爲參照物，子元素給絕對定位，定位在父元素的中心位置。

html代碼以下：

<div class="a">

    <div class="a1"></div>

</div>

css代碼以下：

.a{

 width: 300px;

 height: 200px;

 background-color:#ff0;

 float: left;

 margin: 20px;

 position: relative;

 }

 .a1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 position: absolute;

 left: 0;

 right: 0;

 top: 0;

 bottom: 0;

 margin: auto;

 }

從上面代碼能夠看出，咱們可使用絕對定位上下左右0加上margin：auto，實現元素的水平垂直居中。

2.利用定位和外邊距margin實現水平垂直居中

實現原理：相似於第一種定位方法，結合margin屬性，將屬性值設爲負值，實現效果。

html代碼以下：

<div class="b">

        <div class="b1"></div>

 </div>

css代碼以下：

.b{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 position: relative;

 }

 .b1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 position: absolute;

 left: 50%;

 top: 50%;

 margin-left: -50px;

 margin-top: -50px;

 }

從上面代碼能夠看出，因爲定位實現的是元素左上角點的水平垂直居中，並不能實現咱們想要的效果，因而咱們利用margin負值將元素移上去，這裏注意元素中心點至關於佔寬高各一半因此咱們margin屬性必定要設置子元素（就是要水平垂直居中的元素）的寬（對應margin-left值）高（對應margin-top值）各一半。

3.利用定位加平移實現水平垂直居中

實現原理：與方法2核心原理相同可是採用translate平移實現效果。

html代碼以下：

<div class="c">

        <div class="c1"></div>

 </div>

css代碼以下：

.c{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 position: relative;

 }

 .c1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 position: absolute;

 left: 50%;

 top: 50%;

 transform:translate(-50%,-50%)

 }

原理與方法2相同，只是margin換成了translate平移屬性。

4.利用表格屬性實現水平垂直居中

實現原理;父元素轉化爲表格，而後給子元素套上一個盒子，將這個盒子轉化爲單元格，最後實現效果。（咱們能夠知道在表格屬性中，通常單元格內內容都是垂直居中的，咱們正是利用這一原理實現效果）

html代碼以下：

<div class="d">

        <div class="box">

                <div class="d1"></div>

    ​ </div>

​ </div>

css代碼以下：

.d{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 /* 父元素轉化爲表格 */

 display: table;

 }

 .box{

 /* 轉化爲單元格td */

 display: table-cell;

 vertical-align: middle;

 }

 .d1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 margin: auto;

 }

此方法的缺點就是須要多套一個盒子，不能保證結構的簡潔性。

5.利用vertical-align屬性實現水平垂直居中

實現原理：利用vertical-align屬性實現垂直居中效果，再實現水平居中。

html代碼以下：

<div class="e">

        <div class="e1"></div>

​ </div>

​

css代碼以下：

.e{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 /* 缺點：行高必須固定 */

 line-height: 200px;

 font-size: 0;

 text-align: center;

 }

 .e1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 display: inline-block;

 vertical-align: middle;

 }

此方法的缺點的父元素的行高必須肯定，否則難以實現。同時注意vertical-align必須與display: inline-block;同時使用，否則不會生效。

6.利用vertical-align屬性實現水平垂直居中（2）

實現原理：對上一種方法的優化，添加一個輔助盒子佔父元素的所有高（寬度爲0）並隱藏，解決父元素行高必須肯定的問題。

html代碼以下：

<div class="f">
      <!-- 做爲參照的假盒子 -->
         <div class="f0"></div>
        <div class="f1"></div>

</div>

​

css代碼以下：

.f{

 width: 300px;

 height: 200px;

 background-color: #ff0;

 float: left;

 margin: 20px;

 text-align: center;

 }

 .f0{

 width: 0;

 height: 100%;

 display: inline-block;

 vertical-align: middle;

 }

 .f1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 display: inline-block;

 vertical-align: middle;

 }

7.彈性盒實現水平垂直居中

實現原理：定義父元素爲彈性盒子，而後對子元素進行水平垂直居中處理

html代碼以下：

<div class="g">

        <div class="g1"></div>

​ </div>

​

css代碼以下：

.g{

 width: 300px;

 height: 200px;

 background-color: background-color: #ff0;

 float: left;

 margin: 20px;

 display: flex;

 align-items: center;

 justify-content: center;

 }

 .g1{

 width: 100px;

 height: 100px;

 background-color: #ff0;

 }

若不考慮兼容問題，此方法是最簡單的水平垂直居中方法，三行代碼實現效果。

8.網格佈局grid佈局實現水平垂直居中（gird網格佈局還未發展完善，兼容性差。）

實現原理：核心原理與彈性盒實現原理相同，可是兼容性比Flex彈性盒佈局差，目前儘可能少用。

html代碼以下：

<div class="h">
      <div class="h1"></div>
</div>

css代碼以下：

.h{
        width: 300px;
     
        height: 200px;
 
        background-color: background-color: #ff0;
 
        float: left;
 
        margin: 20px;
 
        display: grid;
 
        /* 垂直居中兩種屬性均可實現 */
 
        /* align-items: center; */
 
        align-content: center;
 
        justify-content: center;
    }
 
    .h1{
        width: 100px;
 
        height: 100px;
 
        background-color: #ff0;
    }

​