因為自己在設計網頁時都會忘記要怎麼做水平垂直置中，所以特別寫一篇來當筆記。這邊第一次嘗試用 CodePen 來讓訪客能同時比對程式碼和執行結果，是個不錯的東西。如果你也想要放到 WordPress 的話，可以試試 CodePen Embed Block 外掛。
文字類
首先來處理文字的部分，完整程式碼預覽放在這節最後。
水平置中
水平置中比較單純，直接在 <p> 或它上層的容器下 text-align: center; 就可以用了。
垂直置中
麻煩的就是垂直置中，CSS 有個屬性叫做 vertical-align: middle;，但是這只能用在 display: inline 或 display: inline-block 的元素中，而且它會影響到前後的元素對齊。
參考 [30 道難解的 CSS 排版] 第 1 道：認識對齊 I 這篇文章，它的 vertical-align 是下在右邊那張圖上，但它影響的元素是左邊的文字。
圖片來源：iT邦幫忙
那我們要怎麼做才不會影響到別的元素？這時有個陌生卻很讚的東西出現了 — 偽元素。
偽元素有 before 和 after 可以用，它存在的位置是在容器中的最前或最後面。簡單來說就是你可以將 vertical-align 下在這邊，而且不會影響到這個容器外的元素。
編寫邏輯
- 首先我們要在容器中下一個
vertical-align: top;確保它是預設的向上對齊。 - 接下來在容器的 before 偽元素中指定一個寬為 0、高 100%、
display: inline-block;並給它vertical-align: middle;，這樣它會存在於容器內最左邊，並影響所有右側的元素垂直對齊方式。 - 最後在容器內的
<p>元素中下display: inline-block;，讓它變成行內元素。
可以點右上角 Logo 來自己修改測試
區塊類
區塊置中的部分，如果你有要做垂直置中的話就直接忽略水平置中的說明，直接跳到後面看。
水平置中 (外距)
如果是小區塊的話常用 padding 來做到置中，這應該不需要說明。而如果是要做為 RWD 的置中容器的話，用 margin: auto; 的方法會比較好。
編寫邏輯
- 給容器一個寬和高。
- 再給它自動左右外距
margin: auto;，簡寫格式為margin: 上下 左右;。
水平置中 (Flex)
Flex 是比較新也比較強大的系統，只要在最外層給它 Flex 相關屬性就可以完全控制子層的長相，就不用去一直調整內外距。
編寫邏輯
- 目標容器 (方框) 外必須有一個父容器。
- 在父容器中下
display: flex;，並給它justify-content: center;指定水平置中。 - 最後給目標容器一個合適的寬與高。
垂直置中 (定位)
區塊的垂直對齊一樣有兩種做法，我們先從定位法來說起。
編寫邏輯
- 目標容器 (方框) 一樣需要一個父容器。
- 父容器必須有明確的高，寬要看用途，這邊直接用 100% 視圖高度來做。
- 接下來給目標容器一個明確的寬高。
- 切換成
position: absolute;絕對定位。 - 設定左側與上方位移各 50%，這時你會發現容器整個偏一邊，因為我們沒把寬高算進去。
- 用
translate(-50%, -50%);來讓 XY 軸各位移 50% 容器的寬高回來，這行真的神，不需要自己去算數值。 - 最後你看到的就是垂直置中的容器。
如果你沒有要水平置中的話就將 left 拿掉、transform 的內容改成 translateY(-50%)。
垂直置中 (Flex)
Flex 就簡單很多了，在父容器上操作就好。
編寫邏輯
- 將父容器改成 display: flex;。
- 設定
justify-content: center;水平對齊與align-content: center;垂直對齊，但現在它的垂直對齊沒作用。 - 所以要記得設定多行排版
flex-wrap: wrap;。 - 完成。