實現居中的幾種方法

在開發的過程中，很多時候我們需要實現居中，所以記錄一下幾種居中的方法。

水平居中

text-align: center;

text-align: center 居中是只針對行內元素的，例如 span、a、img、input 、text 等行內元素。

我們有這樣的 HTML 結構：

<div class="parent">
  <span>inline element</span>
</div>

行內居中只需要給父元素設置 text-align: center 就可以實現。

.parent {
  text-align: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

注意：對於元素中的塊級元素它是不起作用的。但是可以把塊級元素的 display 設置為 inline-block 或者 inline 之后，也是可以生效的，但是需要注意設置 inline 之后是會丟失一些功能的，比如設置元素的寬高。

margin: 0 auto;

通過給自身設置 margin: 0 auto 可以實現對塊級元素的居中。例如：

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

.parent {
  width: 100%;
  border: 1px solid red;
}
.chilren {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background: red;
}

和 text-align: center 一樣，它也可以改變行內元素的 display 為 inline-block 來實現行內元素的居中。

positon: absolute;

使用 absolute 也是可以實現居中的。但是使用它之后，子元素就不能把父元素撐起來了。需要自己確定父元素的大小。

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

.parent {
  position: relative;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}
.chilren {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: red;
}

首先給父元素添加 position: relative 這樣子元素就可以通過父元素來實現絕對定位。然后讓元素向右偏移 50%，需要注意，這個時候居中的是子元素的左邊線。所以這時候就需要使用 transilateX(-50%) 讓元素再相對自己向右位移 50%，這樣就能完美實現居中啦。（這個方法在垂直居中的時候同樣適用）

display: flex;

使用彈性布局也可以很方便的實現水平居中（和垂直居中）。

看下例子：

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

.parent {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

.chilren {
  left: 50%;
  width: 50px;
  height: 50px;
  background: red;
}

用 flex 來實現居中真的很方便，也是網頁布局的一大利器~好用的不得了。對於 flex 不了解的，可以參考阮一峰老師的這篇文章：Flex 布局教程：語法篇。

垂直居中

positon: absolute; 和 display: flex;

這兩個方法用來實現垂直居中也是非常方便的。

positon: absolute;

通過決定定位實現垂直居中的方法和實現水平居中基本沒什么兩樣，只需要向下偏移 50%，然后相對自身向上偏移 50% 就可以了。看代碼：

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

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.chilren {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 50px;
  height: 50px;
  background: red;
}

這邊使用了 translate3d 這個屬性，三個值分別對應了 x、y、z 軸方向的位移。這樣我們就完美的實現元素的居中啦~

margin-top: 50%;

根據絕對定位實現居中，也可以聯想到使用 margin-top: 50% 和 transform: translateY(-50%) 來實現垂直居中，道理是差不多的。代碼就不放了，相信會使用絕對定位實現居中的就會這個啦。

display: flex;

這個很簡單，直接看代碼吧。看過阮一峰老師文章就懂了，寫的很詳細，我就不多贅述了。

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

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

.chilren {
  left: 50%;
  width: 50px;
  height: 50px;
  background: red;
}

line-height 實現文字的垂直居中

因為行高的垂直居中性，所以在行內的元素都是會居中的。那么使用 line-height 等於父元素高度也可以實現元素的居中。

<div class="parent">
  <div class="chilren">啦啦啦，line-height</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.chilren {
  line-height: 200px;
}

這個方法在實現文字垂直居中的時候是非常方便的。

暫時就先記錄這么多常用的居中方法，以后有其他好用的方法的話會進行補充。