手把手教你CSS水平、垂直居中的10種方式

面試必備，工作一定會用到。emmm大家都懂的，話不多說，先直接貼一個總結和效果圖。

總結

• PC端有兼容性要求，子元素寬高固定，推薦absolute + 負margin
• PC端有兼容要求，子元素寬高不固定，推薦absolute + transform
• PC端無兼容性要求，推薦flex
• 移動端推薦使用flex

要怎麼實現上面這幅圖的效果呢，下面爲大家總結了10中常用的方法。首先我先創建一個公共的模板樣式

<template>
  <div class="two">
    <div class="parent">
      <div class="child">123</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.parent{
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  box-sizing: border-box;
  .child {
    height: 100px;
    width: 100px;
    background: #2f8df0;
  }
}
</style>

然後具體用到的樣式單獨寫在方法裏面，首先先介紹4個平時佈局的技巧。

1.水平居中div裏面的div，設置子元素的寬度。

.parent{
	width:300px;
    margin:0 auto;
}

注意：如果子元素設置了display:table-cell，那麼margin:0 auto;將會失效。

2.設置文字垂直居中，設置包含文字div的高。

.child{
    text-align：center
    line-height:100px //知道子元素的高,設置和高一樣的高度
}

3.兩個或者多個塊級元素垂直居中對齊，父元素設置height和line-height相等。

   .parent{
     line-height: 300px; //知道父元素的高,設置和高一樣的高度
	 }
   .child1{
    display: inline-block;
    vertical-align: middle;
    line-height: initial;  //initial 關鍵字用於設置 CSS 屬性爲它的默認值。
   }
   .child2{
    display: inline-block;
    vertical-align: middle;
    line-height: initial;  //initial 關鍵字用於設置 CSS 屬性爲它的默認值。
   }

4.讓一個元素充滿當前整個容器，設置absolute

.parent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

OK，介紹完畢，下面開始介紹CSS實現水平垂直居中的方式。

1.不需要設置子元素的寬高，需要設置父元素的高度。使用 absolute + transform （推薦）

.parent{
   position: relative 
}
.child{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

// 備註一下，如果只需要上下居中那就只要保留top,只要左右居中的話就保留left，translate設置
   translateY(-50%)或者translateX(-50%)

2.不需要設置子元素的寬高，不需要設置父元素的寬高。 使用flex佈局（建議移動端直接使用flex
pc端看需要兼容的情況。）

.parent{
  display:flex;
  align-items:center;
  justify-content:center;
}
.child{
 
}

3.不需要設置子元素的寬高，需要設置父元素的高度。使用 lineheight。
注意：這種方法需要通過text-align在子元素中將文字顯示重置爲想要的效果

.parent{
    line-height: 300px;  //設置和父元素的高度一樣
    text-align: center;
}
.child{
    display: inline-block;
    vertical-align: middle;
    line-height: initial; //initial 關鍵字用於設置 CSS 屬性爲它的默認值。
    text-align: left;  //將文字顯示重置爲想要的效果
}

4.不需要設置子元素的寬高，需要設置父元素的高度。使用css-table (使用之後此元素的margin:0 auto會失效)

.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child{
  display: inline-block;
}

5.設置子元素的寬高，設置父元素的高度。 使用absolute + 負margin

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; //知道子元素的寬高
    margin-top: -50px;  //知道子元素的寬高
}

6.設置子元素的寬高，設置父元素的高度。使用 absolute + margin auto

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

7.設置子元素的寬高，設置父元素的高度。 使用 absolute + calc(這種方法兼容性依賴calc的兼容性)

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

8.使用writing-mode（使用起來比較複雜，不推薦）

 //公共的樣式在最上面
 <div class="parent">
      <div class="box-child">
        <div class="child">123</div>
      </div>
    </div>

.parent{
     writing-mode: vertical-lr; //改變文字顯示的方向
    text-align: center;
}
.box-child{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child{
    text-align: left; //將文字顯示重置爲想要的效果
    margin: 0 auto;
}       
    

9.不需要設置子元素的寬高，不需要設置父元素的寬高。 使用grid佈局（不建議使用，目前兼容性不是很好）

.parent{
    display: grid;
}
.child{
     align-self: center;
     justify-self: center;
}

10.使用table佈局（純粹湊方法，這年頭，誰還用table佈局呀，哈哈哈哈）

<table>
    <tbody>
        <tr>
            <td class="parent">
                <div class="child">123</div>
            </td>
        </tr>
    </tbody>
</table>

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}