居中到底有多少種方法

前言

居中能夠說是網頁佈局中很是常見的佈局了，垂直居中，水平居中，其中又分爲塊級元素和行內元素，沒有系統的整理過還真有點搞不清楚。來看看各式各樣的居中到底有多少種。

水平居中

行內元素水平居中

行內元素水平居中最多見的場景就是文字居中，最經常使用的就是對其父元素設置 text-align:center,這個方法對一下幾種元素都有效：

• display:inline
• display:inline-block、
• display:inline-table
• display:inline-flex

<div class="parent">
        <a>個人博客</a>
  </div>

.parent{
      text-align:center;
  }

塊級元素水平居中

1.設爲行內元素使用居中

看完行內元素居中咱們很容易就會想到，能夠將塊級元素手動設置爲行內元素，再使用text-align:center居中

<div class="parent">
     <div class="child">
          仍是個人博客
      </div>
  </div>

.parent {
  text-align: center;
}
.child {
  display: inline;
  background-color: red;
  color: white;
}

固然若是有對元素設置寬高的需求的話設置 display:inline-block 便可

2. 使用左右 margin:auto

經過將塊狀元素的左右 margin 設置爲 auto 可使左右 margin 平分所剩下的空間，獲得的效果天然就是元素水平居中了，不過前提是塊狀元素須要設置好寬度

<div class="child"></div>>

.child {
  width: 100px;
  height: 50px;
  margin: 0 auto;
  background-color: blue;
}

經過控制檯查看佈局能夠看到，藍色元素左右被等寬的 margin 佔據。

這種方式更合適元素獨佔一行的狀況，由於都被 margin 佔滿了沒法再添加其餘元素了。

3.使用table+margin

使塊級元素得到寬度除手動設置 width 以外，還能夠經過設置 display: table。此時元素寬度爲內容寬度，因此塊狀元素內部須要有內容，否則就會坍塌不見。一樣佔據一整行。

<div class="child">個人博客</div>>

.child {
  display: table;
  margin: 0 auto;
  background-color: blue;
  color: white;
}

4.使用absolute+transform

先將父元素設置爲相對定位，對子元素使用絕對定位，讓子元素向右移動父元素寬度的通常，而後向左移動子元素本身寬度的通常

<div class="parent">
     <div class="child">
          個人博客
      </div>
  </div>

.parent {
  position: relative;
}
.child {
  background-color: blue;
  color: white;
  left: 50%; // left 設置百分比即爲父元素寬度的百分比
  transform: translateX(-50%); //translateX 百分比是本身寬度的百分比
  position: absolute;
}

這樣設置的元素是脫離正常文檔流的，不影響其餘元素佈局。可是有比較少的瀏覽器不支持設置 transform 屬性。

5.使用flex+justify-content

這也是我使用的最多的一種居中方式了，經過使用 flex 佈局 方式能夠很輕鬆的實現水平居中，
設置 justify-content: center;便可實現子元素水平居中排列，其中 justify-content 用於設置彈性盒子元素在主軸（默認橫軸）方向上的對齊方式

<div class="parent">
     <div class="child">
          個人博客
      </div>
  </div>

.parent {
  display: flex;
  justify-content: center;
}
.child {
  background-color: blue;
  color: white;
}

能夠看到咱們並無設置子元素的寬度，在 flex 佈局下 div 寬度自動收縮到了內容寬度，效果和使用 display: table 同樣，這時一樣能夠經過設置 margin:0 auto 居中，可是這明顯不是咱們使用 flex 佈局的初衷。經過使用 flex 佈局元素無需脫離正常文檔流，無需獨佔一行。固然不可避免的會有一小部分瀏覽器不兼容。

6. 利用絕對定位元素自動伸縮

代碼以下：

<div class="parent">
        <div class="child"></div>
      </div>

.parent {
  position: relative;
}
.child {
  position: absolute; /*絕對定位*/
  width: 200px;
  height: 100px;
  background: blue;
  margin: 0 auto; /*水平居中*/
  left: 0; /*此處不能省略，且爲0*/
  right: 0; /*此處不能省略，且爲0*/
}

多塊級元素水平居中

1.使用 flex 佈局

利用彈性佈局(flex)，一樣能夠實現多塊級元素水平居中。

<div class="parent">
     <div class="child">
          個人博客
      </div>
        <div class="child">
          個人博客
      </div>
        <div class="child">
          個人博客
      </div>
  </div>

.parent {
  display: flex;
  justify-content: center;
}
.child {
  background-color: blue;
  color: white;
    margin-left: 10px;// 只是爲了分離開元素
}

2. 利用inline-block

將要水平排列的塊狀元素設爲display:inline-block，而後在父級元素上設置text-align:center，達到與上面的行內元素的水平居中同樣的效果。

<div class="parent">
     <div class="child">
          個人博客
      </div>
        <div class="child">
          個人博客
      </div>
        <div class="child">
          個人博客
      </div>
  </div>

.parent {
text-align: center;
}
.child {
  background-color: blue;
  color: white;
    margin-left: 10px;
    display: inline-block;
}

浮動元素水平居中

1. 定寬的非浮動元素經過設置 relative + 負margin,

原理見下圖：

<div class="parent">
     <div class="child">
          個人博客
      </div>
  </div>

.child {
   background-color: blue;
  width: 100px;
  height: 50px;
  position: relative;
  left: 50%;
  margin-left: -50px;
}

注意：樣式設置在浮動元素自己，父元素無需設置

2.不定寬的浮動元素經過父子容器都相對定位居中

<div class="parent">
        <div class="child"></div>
      </div>

.parent {
  float: left;
  position: relative;
  left: 50%;
}
.child {
  background-color: blue;
  width: 100px;
  height: 50px;
  float: left;
  position: relative;
  right: 50%;
}

能夠看到 父元素組件也是偏移了位置的

3. 使用 flex 佈局

flex 佈局，強。這裏就不贅述了，使用方法同上面同樣

垂直居中

行內元素垂直居中

1. line-height = height

讓父元素行高等於高度便可實現行內元素垂直居中

<div class="parent">
        <a class="child">個人博客</p>
  </div>

.parent {
  background-color: red;
  color: white;
  height: 120px;
  line-height: 120px;
}
.child {

}

效果截圖：

2. 利用表佈局（table）

使用表佈局的 vertical-align: middle 也可實現垂直居中

.parent {
  background-color: red;
  display: table;
  height: 140px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

塊級元素垂直居中

1. absolute+負margin

在已知高度的狀況下，可使用 top:50% 讓元素距離頂部爲父元素高度的一半，而後使用 -margin 使元素向上位移自身高度的一一半，原理其實和上文水平居中裏一種同樣的

<div class="parent">
        <div class="child"></div>
  </div>

.parent {
  position: relative;
  background-color: antiquewhite;
  height: 200px;
}
.child {
  background-color: beige;
  position: absolute;
  top: 50%;
  height: 100px;
  width: 200px;
  margin-top: -50px;
}

經過這種思想很容易想出另一種方法，那就是使用 transform 使元素位移，原理是如出一轍的，就不單獨列出。

2.使用flex+align-items

使用 flex 佈局，經過設置父元素的 align-items 實現子元素的垂直居中

<div class="parent">
        <div class="child"></div>
  </div>

.parent {
  background-color: antiquewhite;
  height: 200px;// 父元素必須有高度才能實現垂直居中
  display: flex;
  align-items: center;
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
}

這個方法對行內元素一樣有限，將 <div class="child"></div>改成 <p>個人博客</p>

水平垂直居中

1.Flex 佈局

水平垂直居中就是組合使用 水平居中與垂直居中，不過要說最方便的仍是使用 flex 佈局

<div class="parent">
        <div class="child"></div>
  </div>

.parent {
  background-color: antiquewhite;
  height: 200px;// 父元素必須有高度才能實現垂直居中
  display: flex;
  align-items: center; // 垂直居中
   justify-content: center; // 水平居中
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
}

2.margin:auto

容器元素設爲 flex 佈局或是 grid 佈局，子元素只要寫 margin: auto 便可,不能兼容低版本的IE瀏覽器。

.parent {
  background-color: antiquewhite;
  height: 200px;
  display: grid;
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
  margin: auto;
}

和 flex 佈局有所不一樣的是能夠看到父元素被 margin 填滿了

總結

各類各樣的居中方案一數居然有差很少二十種，在實際開發中固然不會用到這麼多，就我本身而言使用得最多的仍是 margin:auto 和 flex 佈局，研究這麼多的目的知識爲了更加熟悉 CSS 的一些特性，好比 -margin-left 是讓元素左移，而 -margin-right則會讓元素右邊的元素惟一，元素自己保持不動。這個特性不去研究我還真不知道。還有能夠看到最方便的 flex 佈局不支持比較老的瀏覽器，兼容性有必定問題，可是我想說的是除非你是搭建政府網站，其實不必去考慮兼容 IE6 這種老古董了。兼容不必矯正過往，這隻會噁心到本身。

參考文章

• 如何居中一個元素（終結版）(部分圖片摘自於此)
• Can I use
• Flex 佈局教程--阮一峯
• 如何居中一個元素 (正常、絕對定位、浮動元素）
• 這15種CSS居中的方式，你都用過哪幾種？