[CSS] 水平置中與垂直置中(傳統作法)

接下來，我就以 inline 與 block 的水平置中及垂直置中方法來介紹(inline-block 的方法就與 inline 一樣)~

水平置中

• inline: 利用 CSS 的 text-align 屬性，在父元素宣告以下這行即可。 text-align:center;
• block: 利用 CSS 的 margin 屬性，會根據自身寬度自動(auto)調整左右寬度。 margin: 0px auto;

垂直置中的每個方法都有一定的限制條件，要看使用時的條件與情況才能決定該套用哪種寫法

垂直置中(方法一)

最單純的固定此元素的與父元素之間的 padding-top、padding-bottom

PS. 這個方法僅將元素中的內容置中，實際上元素區塊是佔滿父元素的。 (這樣元素內容高度可動態增加)

垂直置中(方法二)

(垂直置中部分僅討論具有 block 屬性之元素。inline 元素並不具有可調整的高度，因此應被具有 block 屬性的元素包住)

利用 line-height 設定行高與元素相同高度，即可垂直置中。

PS. 這個方法僅能應用在內容為單行時的情況，若超過一行則會導致 overflow。

垂直置中(方法三)

利用模擬 table 的 display， display: table-cell; 具有 vertical-align: middle; 屬性。

PS. 這樣的方法，其實就是早期使用 table 的方式去做網頁的排版，只是我們換成使用 div。

垂直置中(方法四)