CSS實現水平垂直居中的方法

劃重點，這是一道面試必考題目，不少面試官都很喜歡問這個問題，這裏總結一下一些經常使用的方法

要實現上面的效果看似很簡單，實則暗藏玄機，本文總結了一下css實現水平垂直居中的方式，下面逐一介紹。

僅居中元素定寬、定高適用

• absolute + 負margin
• absolute + margin auto
• absolute + calc

居中元素不定寬高

• absolute + transform
• lineheight
• writing-mode
• table
• css-table
• flex
• grid

absolute + 負margin

爲了實現上面的效果，先來作些準備工做，假設HTML代碼以下，總共有兩個元素，父元素和子元素

<div class="wp">
  <div class="box size">absolute + 負margin</div>
</div>
複製代碼

wp是父元素的類名，box是子元素的類名，由於有定寬和不定寬的區別，size用來表示指定寬度，下面是全部效果都須要用到的公共代碼，主要是設置顏色和寬高

注意：後面再也不重複這段公共代碼，只會給出相應的提示

/* 公共代碼 */
.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
}

.box {
  background: green;    
}

.box.size{
  width: 100px;
  height: 100px;
}
/* 公共代碼 */
複製代碼

絕對定位的百分比是相對於父元素的寬高，經過這個特性可讓子元素居中顯示，可是絕對定位是基於子元素的左上角，也就是當咱們爲絕對定位，而且 top 和 left 爲50%的時候，子元素的左上角恰好位於父元素的中心，而咱們指望的效果是子元素中心居中顯示

爲了修正這個問題，能夠藉助外邊距的負值，負的外邊距可讓元素向相反的方向定位，經過指定子元素的外邊距爲子元素寬度的一半的負值，就能夠實現子元素居中了，css 代碼以下

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */

/* 定位代碼 */
.wp {
  position: relative;
}
.box {
  position: absolute;;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
複製代碼

這是我比較經常使用的方式，這種方式比較好理解，兼容性也很好，缺點是須要知道子元素的寬高

absolute + margin auto

這種方式是要求居中元素的寬高必須固定，HTML 代碼以下：

<div class="wp">
  <div class="box size">absolute + margin auto</div>
</div>
複製代碼

這種方式是設置各個方向的具體都是0，這個時候再設置margin:auto 就能夠在各個方向上面居中了。

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */

/* 定位代碼 */
.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
複製代碼

這種方式兼容性也好，缺點也是須要知道子元素的寬高

absolute + calc

這種方式也是要求居中的元素寬高必須固定，因此咱們爲box增長 size 屬性 HTML 代碼以下：

<div class="wp">
  <div class="box size">absolute + calc</div>
</div>
複製代碼

感謝css3 帶來了計算屬性，既然top的百分比是基於元素的左上角，那麼減去寬度的一半就行了，代碼以下:

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */

/* 定位代碼 */
.wp {
  position: relative;
}
.box {
  position: absolute;;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}
複製代碼

上面這種實現方式和第一種 absolute+負margin 原理同樣，只是實現方式不同，這種方法兼容性依賴calc的兼容性，缺點是須要知道子元素的寬高。

absolute + transform

仍是絕對定位，可是這個方法不須要子元素固定寬高，因此不須要size類了，html代碼以下

<div class="wp">
  <div class="box">absolute + transform</div>
</div>
複製代碼

核心仍是修復絕對定位的問題，還可使用css3新增的特性 transform，transform的translate 屬性也能夠設置百分比，實際上是相對於自身的寬和高，因此能夠講 translate設置爲 -50%，就能夠居中了，代碼以下：

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */

/* 定位代碼 */
.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
複製代碼

這種方法兼容性依賴translate2d的兼容性

lineheight

利用行內元素居中屬性也能夠作到水平垂直居中，HTML代碼以下:

<div class="wp">
  <div class="box">line-height</div>
</div>
複製代碼

這種方式原理也很簡單，將box元素設置爲行內元素，經過text-align就能夠作到水平居中，可是不少同窗可能不知道經過vertical-align 也能夠在垂直方向上作到居中，代碼以下:

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */

/* 定位代碼 */
.wp {
  line-height: 300px;
  text-align: center;
  font-size: 0px;
}
.box {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  text-align: left; /* 修正文字 */
}
複製代碼

這種方法須要在子元素中將文字顯示重置爲想要的效果。

writing-mode

不少同窗必定和我同樣不知道 writing-mode屬性，簡單的說就是 writing-mode能夠改變文字的顯示方向好比經過writing-mode讓文字顯示方向變爲垂直方向

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
複製代碼

.div2 {
  writing-mode: vertical-lr;
}
複製代碼

水平方向
垂
直
方
向
複製代碼

更加神奇的是全部水平方向上的css屬性，都會變爲垂直方向上的屬性，好比text-align,經過writing-mode和text-align就能夠 作到水平和垂直方向的居中了，只不過稍微麻煩一些。

<div class="wp">
  <div class="wp-inner">
    <div class="box">123123</div>
  </div>
</div>
複製代碼

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */

/* 定位代碼 */
.wp {
  writing-mode: vertical-lr;
  text-align: center;
}
.wp-inner {
  writing-mode: horizontal-tb;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.box {
  display: inline-block;
  margin: auto;
  text-align: left;
}
複製代碼

這種方法實現起來和理解起來都稍微有些複雜，通常不怎麼使用

table

曾經table被用來作頁面佈局，如今沒有人這麼作了，可是table也能實現水平垂直居中，可是會增長不少冗餘的代碼

<table>
  <tbody>
    <tr>
      <td class="wp">
        <div class="box">使用table實現水平垂直居中佈局</div>
      </td>
    </tr>
  </tbody>
</table>
複製代碼

table 單元格中的內容自然就是垂直居中的，只要添加一個水平居中屬性就能夠了

.wp{
  text-align: center
}
.box{
  display:inline-block;
}
複製代碼

這種方式代碼臺冗餘，並且也不是table的正確的用法

css-table

css新增長的table屬性，可讓咱們把普通的元素，變成table元素，經過這個特性也可以實現水平垂直居中

<div class="wp">
  <div class="box">css-table屬性實現水平垂直居中</div>
</div>
複製代碼

下面經過css屬性，可讓div顯示和table同樣

.wp {
  display: table-cell; // 這個屬性很是重要
  text-align: center;
  vertical-align: middle;
}
.box {
  display: inline-block;
}
複製代碼

這種方式和table同樣的原理，可是沒有那麼多的冗餘代碼，兼容性也還不錯

flex

flex 做爲現代的佈局方案，顛覆了過去的經驗，只須要幾行代碼就能夠優雅的作到水平垂直居中

<div class="wp">
  <div class="box">flex佈局實現水平垂直居中</div>
</div>
複製代碼

.wp {
  display: flex;
  justify-content: center;
  align-items: center;
}
複製代碼

目前在移動端已經徹底可使用flex，PC端須要看看本身的業務狀況

grid

css 新出的網格佈局，因爲兼容性並非很好，一直沒有關注過，經過grid也能夠實現水平垂直居中

<div class="wp">
  <div class="box">grid佈局實現水平垂直居中</div>
</div>
複製代碼

.wp {
  display: grid;
}
.box {
  align-self: center;
  justify-self: center;
}
複製代碼

代碼量也不多，但兼容性不如flex，不推薦使用