CSS垂直居中，你會多少種寫法？

  CSS控制居中是前端開發中很是經常使用的佈局技能，本文列出幾種CSS控制元素居中的幾種方法。
  談及HTML元素居中展現，涉及到水平居中和垂直居中，以及水平垂直居中。因爲HTML文檔流是水平方向的，因此水平方向上的佈局控制比垂直方向要簡單不少，居中也是如此。不過（水平）垂直居中仍是有不少種寫法，至少一隻手是數不過來了，本文列出幾種，並進行簡單比較。

1、水平居中

  使用CSS控制水平居中很簡單：

• 塊級元素 設置width,並設置margin auto
• 內聯元素 父元素設置text-align center

  HTML代碼以下:

<div class="container">
  <div class="content">
    水平居中哦
  </div>
</div>

1. 塊級元素水平居中

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
}

.content {
  width: 10rem;
  border: 1px solid green;
  margin: 0 auto;
}

效果：

2. 內聯元素水平居中

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
  text-align: center;
}

.content {
  display: inline-block;
  border: 1px solid green;
}

效果：

代碼很簡單，並且沒什麼兼容性問題，因此一般也不須要用別的複雜方式來實現水平居中效果。

2、水平垂直居中

  使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那麼方便，這裏主要羅列幾種。

1. flex佈局

flex佈局出現之後，垂直居中就很方便了，直接設置父元素：

display flex
align-items center

若是同時要水平居中，則同時設置：

justify-content center

須要注意的是IE10+才支持，webkit前綴瀏覽器設置flex屬性須要加webkit。

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: -webkit-flex;
  display: flex; // 關鍵屬性
  align-items: center;　// 垂直居中
  justify-content: center // 水平居中
}

.content {
  border: 1px solid green;
}

2. margin+ position:absolute佈局

  position: absolute佈局的元素，經過設置top/bottom, left/right這兩對屬性，可讓元素在垂直方向和水平方向分別具備了自適應的特性。就像div在水平方向的默認表現同樣!
上文中對於塊級元素的水平居中，咱們設置寬度而後配合以margin能夠實現水平居中。而對於設置了top/bottom,left/right的absolute定位元素，咱們設置寬高再配合margin就能夠達到水平垂直居中：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  height: 100px;
  margin: auto;
  border: 1px solid green;
}

效果：

兼容性很好，IE8以上支持。

3. transform + absolute

  absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位；transform是CSS3中很是強大的一個屬性，能夠接收多個屬性值，包括旋轉、縮放、平移等多種功能。這裏使用兩者配合，先將子元素左上定點定位到父元素中心點，再使用transform將子元素中心點移動到父元素的中心點便可：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  border: 1px solid green;
}

效果：

  這個方法有個小缺陷，就是translate函數的參數，最後的計算值不能爲小數，不然有的瀏覽器渲染出來效果會模糊，因此使用本方法的話最好設置一下寬高爲偶數。

4. absolute+margin負值

  與上一種方法很相似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負值的方式將元素拉向左上角。
代碼：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;
  margin-left: -100px;
  border: 1px solid green;
}

效果：

5. absolute + calc

  從上兩種方法能夠看到，absolute設置了left和top再經過平移或者margin將元素從新定位回去。若是咱們直接能夠計算出正確的left和top值，豈不是一次到位？calc函數正有此功能，固然咱們須要知道子元素的寬高：

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  text-align: center;
  position: relative;
}

.content {
  position: absolute;
  border: 1px solid green;
  width: 200px;
  height: 100px;
  left: calc(50% - 100px);
  top: calc(50% - 50px);
}

效果：

6. line-height + vertical-align

  vertical-align是一個做用於內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，可是默認狀況下是與父元素「基線對齊」的。這裏的的基線指的是父元素每一行中的一個垂直位置，是英文ｘ下邊緣所在的水平, 經過設置vertical-align爲middle能夠將內聯元素的中部對齊父元素的中部（基線+字母ｘ的一半高度）。因此能夠利用這一點，將父元素的行高設置爲其自身高度，而後將子元素與父元素中線對齊，便可實現垂直居中。
代碼：

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  line-height: 300px;
  text-align: center;
}

.content {
  display: inline-block;
  line-height: 1.5;
  border: 1px solid green;
  vertical-align: middle;
}

效果：

以上幾種方法各有不一樣的適用條件，所以也有不一樣的優缺點，下表對各類方法進行了比較：

方法	條件	兼容性
flex佈局	無	IE10+
margin + absolute	知道子元素寬高	IE8+
transform + absolute	無，子元素寬高應爲偶數	IE10+
absolute + margin負值	知道子元素寬高
absolute + calc	知道子元素寬高	IE9+
line-height + vertical-align	知道父元素寬高

---

  CSS中同一種表現效果每每有多種不一樣的實現方法，要刻意地嘗試多種寫法，避免熟悉了一兩種方法就止步不前，這樣才能對各類狀況駕輕就熟。

---

本文最早發佈於:http://wintc.top/site/article...，轉載請註明出處。