CSS 常見的老問題之一的對齊問題，這邊筆記一下目前自己常用以及網路上流傳的各種置中方法，分為水平和垂直兩塊。
基礎知識
HTML 的元素有預設的 display 屬性，這點要先清楚，才能避免一些麻煩。完整版的文件可以看這邊。
- inline: <span>, <a>, <input> ……等：預設為不換行，由內容大小決定寬度，無法設定 width, height, margin 和 bottom
- block: <div>, <nav>, <section>, <nav> ……等：預設為佔滿父元素 100%
- inline-block: 結合上述兩者，外層 inline 裡層 block，可以多個並排。當你的 <div> 想要橫向排列，這就是一個可用的方式。
水平置中排列
inline 元素
在父元素下宣告 text-align，裡頭的 inline 元素就會自動套用。
block 元素
在元素本身上運用 margin 屬性，語法為 margin: 0px auto，會依照左右寬度自行縮放。
inline-block 元素
依照 inline 元素來套用即可。請小心，float:left 系列的語法，要搭配 clear:both 之類的語法來避免高度塌陷的問題。
DEMO
垂直置中排列
傳統方式
- Line-height+單行文字：運用設定文字行高，會在其正中央位置
- Line-height+多行文字：同上概念，被要垂直置中的元素用 div 包起來，並設置 inline-block & vertical-align
- 運用 :before + inline-block：將偽元素和要對齊的子元素皆設定為 inline-block，就可以用 vertical-align 了
- Absolute + margin 負值(調整位置用)
- Absolute + translate：絕對位置 + 百分比調整
Flex 系列
- 兩層 div 包夾，父層下 display:flex、align-items: center。
- 兩層 div 包夾，父層下 display:flex，子層下 margin:auto 0。
- 兩層 div 包夾，父層下 display:flex，子層下 align-self: center。
Display:table-cell
將 div 設定為表格的 td，那麼你就可以用儲存格垂直對齊的 vertical-align:middle。
