本文為參加第 11 屆「iT 邦幫忙鐵人賽」系列文章，會優先在部落格發文，再貼到 iT 邦幫忙～。
如果文章對您有幫助，歡迎到 iT 邦幫忙給我一個訂閱與肯定 ^___^。
好久沒寫文了，也希望自己可以堅持 30 天，加油（握拳
昨天講了text-align以及vertical-align這兩個常見的對齊語法，但他們可以對齊的範圍都比較小，偏向對齊元件，而非版面。
如果要讓版面置中，或是再更複雜的一些排版，我們還可以有更多選擇。
版面置中的好幫手: margin
這個應該很多人都用到爛掉了，但有的朋友可能不太懂原理，在此簡單介紹一下。
我們在切一個大版面時，如果要讓他左右置中，現在普遍最快的方法是使用以下語法：
然後版面就可以置中了。
margin: 0 auto; 是 margin: 0 auto 0 auto; 的簡寫，表示上下邊界為 0 ，左右為auto表示自己均分。margin會去判斷.container的寬度以及螢幕的寬度，相減之後除以二就是左右邊界的數值了。
至於該如何得到.container的寬度呢？就是必須要在 CSS 寫上寬度，如果沒寫寬度是不會有效果的。
margin大到版面，小到元件，只要有指定元素的寬度，幾乎都可以用這個方法左右置中。
更多的 margin
☞ 圖片一樣可以使用margin: 0 auto;置中
☞ margin可以讓版面置中，但沒辦法讓文字置中唷。
讓 padding 幫你實現簡單的垂直置中
如果說margin是負責版面，那padding就是負責裡面的元素了。
我們可以利用padding將 Box Model 往外推的特性做到置中的效果，只要上下數值一樣就可以囉。
選單文字垂直置中的首選 line-height
▼ 假設今天要製作一個類似這樣的選單，文字需要垂直置中，同時又有限定元素的高度。
因為有限定高度，所以我們沒辦法用padding去推 Box Model；另外一個原因是，如果選單再複雜一點，padding通常都另有用途。
所以假設今天需求是：
- 有限定元素高度
- 文字需垂直置中
- 文字非常單純只有一行
在上述的情況下，可以直接用line-height解決，只要讓line-height跟height高度相同即可
用 position 讓你的版面水平垂直置中
用position的解法，我之前在部落格有寫過了，所以容我直接跳過～
有興趣的朋友可以直接參考這一篇文章：用 css 讓區塊水平垂直置中
用 transform 做出與 position 類似的置中效果
transform與position類似，都是直接將 Box Model 推移到特定的位置上，達到置中的效果。
使用position可以再利用margin去推算要定位的位置，但前提是你必須要知道元素的寬跟高，才有辦法回推。但使用position加transform就不用特別設定寬跟高，非常的方便
