學習網頁開發到現在，我一直覺得切版是我的弱項，尤其是水平置中和垂直置中。導致之前在練習教案的時候，都需要花許多時間去查資料和 try and error。為了把基礎打好以應付未來的挑戰，特別再複習了一下水平置中和垂直置中的方式，並整理出一些重點。
前言
在介紹水平置中的方法之前，需要先認識網頁元素(HTML element)的種類，因為 HTML會根據網頁元素的種類去預設它的 display 屬性。一般來說，網頁元素分為兩種：Block-level Element 和 Inline Element。
Block-level Element
Block-level element 顧名思義就是一個區塊元素，它會佔滿父元素的寬度，並從每次都是從新的一行開始。常見的 block-level elememt 有：
<div> <figure> <form> <h1>~<h6 <header> <li> <main> <nav>
<ul> <ol> <p> <section> <table>Inline Element
Inline Element 則可以解讀為行內元素，它不會換行，而且會自適應內容大小，但是不能夠設定 width、height、margin、background-img…等。常見的inline element 有：
<a> <button> <em> <i> <img> <label> <select> <span> <strong> <textarea> Display: inline-block
另外再介紹一種等等會用到的的 Display 屬性： display: inline-block
inline-block 同時擁有 bock-level element 和 inline element 的特性：它的外在是 inline，而內在是 block 。因為外在是inline，所以它不會換行而且會自適應內容大小，但內在像 block，因此它可以設定 width、height、margin、backgound-img…等參數。
水平置中的方法
text-align: center;
text-align 主要是用在 inline element。如果在父元素設定 text-align: center，那麼在該父元素裡面的所有元素，只要是文字或是 inline element，就會依據父元素的寬度進行水平置中。
若該父元素裡面是 block-level element，則不會水平置中(但 block-level element裡的文字或是inline element 也會有置中效果)。這時候可以加上 position: inline-block; 讓 block-level element 也擁有inline的特性，就可以達成水平置中的效果。
margin: 0 auto;
margin: 0 auto 主要是用在 block-level element。如果想針對一個區塊做水平置中，而該元素有已知寬度(如px、%)，就可以對想置中的元素設定margin: 0 auto;
註1：如果區塊的寬度沒有設定或是可變動的，會直接佔用整個寬度空間，所以一定要對想置中的元素設定好固定寬度。
註2：如果置中元素裡內容想要能夠有自適應內容大小的效果，則建議使用 text-align: center;
若是inline element，則需要加上 display: block 後才能設定 margin 並完成置中。
Position
最後我們也可以使用 Position 的方式來達成水平置中，直接來看實例：
- 首先我們可以先設定父元素和子元素的起始位置(如下圖)。要注意的是，如果有設定 position: absolute 的元素，它的父元素必須是非預設(預設是static)的值。
2. 將 content 設為 left: 50%, top: 50%，這時候 content 就會由上往下、由左而右的移動50%的距離。由於元素都是以左上角為定位點，所以此時被置中的其實是左上角的點。
3. 這時我們就需要使用 transform: translate(-50%, -50%) 去將 content 往回移自身的 50%距離。如此一來，content 就會是水平置中及垂直置中了。
註：translate(-50%, -50%) 裡第一個是 -50% 是移動 X 軸，而第二個 -50% 是移動 Y 軸。
最後附上 Codepen：
以上就是到目前為止我所知道的水平置中方法，之後再來整理垂直置中方法的筆記。
