CSS 垂直置中

最經典的題目之一？

line-height 單行文字

原理是利用行高來把文字推到中間：

.box {
  width: 200px;
  height: 200px;
  line-height: 200px;
}

缺點是只適用於「一行文字」。

line-height 多行文字

需搭配另外兩個屬性： inline-block vetical-align

line-height 其實不僅限於文字，它可以適用所有「inline-level」的元素，所以只要把內容用「一個盒子」包起來就好：

HTML：

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Dignissimos ad quo ipsam! Dolor
  </div>    
</div>

CSS：

.box {
  margin: auto;
  width: 200px;
  line-height: 200px;
  text-align: center;
  background-color: orange;
}
.content {
  display: inline-block;
  /* line-height 會繼承，所以這裡要初始化 */
  line-height: 1;
  vertical-align: middle;
}

缺點是內容只能是 inline-level 元素，然後比較不直覺一點。

padding

利用 padding 來撐開高度：

.box {
  width: 200px;
  height: 200px;
  padding: 30px 0;
}

缺點是這樣就沒辦法設定高度。

absolute + transform

我很常用的做法。

原理是用 absolute 把距離設為離參考點 1/2 的寬高距離，接著用 translate 讓元素往左上方偏移自身 1/2 的寬高：

.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

暫時想不到有什麼缺點，硬要說的話就是 Code 比較多吧。

absolute + margin auto

有時候會用到的做法。

原理是利用 top bottom left right 來設定元素的「可用空間」，再加上 margin:auto 自動分配「剩餘空間」的特性來達成：

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

缺點是元素必須設定固定的寬高（% 也 ok）才有效。

Flex + align items

Flex 好棒棒！

.box {
  width: 300px;
  height: 300px;
  padding: 0px 30px;
  margin: auto;
  background-color: orange;
  /* 重點是這兩行 */
  display: flex;
  align-items: center;
}

Flex + margin auto

Flex 盒子構造跟一般人不太一樣，所以只要對子元素設定 margin:auto 就能透過分配「剩餘空間」來達到垂直置中的效果。

備註：可以回想 absolute + margin 的原理，這個的原理跟它差不多。

HTML：

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Totam minus ea laudantium, corporis minima reprehenderit quis
    voluptatum quiiure! Aliquid, eligendi provident tempora 
    deleniti tempore obcaecati at neque optio nobis.
  </div>
</div>

CSS：

.box {
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  background-color: orange;
  margin: auto;
  /* 重點 */
  display: flex;
}
.content {
  width: 200px;
  background-color: black;
  padding: 20px;
  color: white;
  /*
    重點：
    記得要設定寬度，
    就跟 block 要有寬度才能搭配 margin 來置中一樣
  */
  width: 200px;
  margin: auto;
}

relative + calc()

只是想介紹一下 calc() 這個屬性，它可以對不同單位做計算：

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Totam minus ea laudantium, corporis minima reprehenderit quis voluptatum
  </div>
</div>

.box {
  width: 300px;
  height: 300px;
  background-color: orange;
  margin: auto;
}
.content {
  box-sizing: border-box;
  width: 200px;
  background-color: black;
  padding: 20px;
  color: white;
  /* 重點 */
  position: relative;
  top: calc((100% - 200px) / 2);
  height: 200px;
}

備註：top 跟 bottom 的 % 會相對於父層的 height，left 跟 right 的 % 會相對於 width。

簡單說明一下原理，其實重點是要算出 「.content 該離上面多少距離」。

不用想太複雜很簡單，只要知道 .content 的高度就夠了，為什麼？因為只要知道「可用空間」有多大，再把「可用空間 / 2」就是答案了。（把空間分配到左右邊，元素不就在中間了嗎？）

那要怎麼知道「可用空間」有多少？ => calc((100% - 200px))

這個翻成白話就是「.box 的高度 - .content 的高度）」，所以最後除以二就是正確的距離了。