在網頁排版時，一定會用到垂直置中，以下列出各種常用的垂直置中方法。

• line-height
• vertical-align: middle
• position: absolute
• transform: translate()
• calc
• flex

codepen

CSS 垂直置中的各種方法

1. line-height

父元素高與行高設定相同數值並加上文字置中 text-align: center，適用於「單行」的「行內元素」例如：a、p。

.wrap {
  height: 150px;
  line-height: 150px;
  text-align: center;
}

2. vertical-align: middle

vertical-align: middle 可以做垂直置中，限制只能使用在 inline 及 inline-block而且 vertical-align: middle 的垂直置中，指的是在元素內的所有元素垂直位置互相置中，所以必須有一個元素與父元素同高 height: 100%。

這時就可利用偽元素 ::before 或 ::after，添加到父元素中。

.wrap {
  text-align: center;
}
.wrap::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.box {
  display: inline-block;
  vertical-align: middle;
}

3. position: absolute

position: absolute 加上margin: auto，此方法只能用在子元素有明確的容器大小。

.wrap {
  position: relative;
}
.box {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

4. transform: translate()

利用 transform: translate(-50%, -50%)將子元素本身的大小往回推一半。

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

5. cale

利用 calc 計算的能力，距離是 「50% 的父元素大小 - 50% 的子元素大小」，垂直使用 top 水平使用 margin-left。

.box {
  position: relative;
  top: calc(50% - 15px);
  margin-left: calc(50% - 15px);
}

15px 為 box 的大小的一半。

6. flex

最簡單的方法，用過就回不去了。

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