使用 CSS 設定水平置中的方法

使用 CSS 設定水平置中，要先把握住兩個部分：
一個是要置中的元素 (content)，
另一個則是其父元素 (container)。

網頁元素預設的 display 屬性分為 inline element 和 block-level element 兩種。
  • inline element 會自動調整內容大小，不能設定 width、height、margin、background-image...。
    如：a、span、img...
  • block-level element 預設佔滿父元素寬度。
    如：div、p、ul、li、h1、h2...
  • inline-block 具有不換行、會自動調整內容大小，但又可以設定 width、height、margin、background-image...。

text-align: center;

(主要用在 inline element)

在父元素設定 text-align: center，裡面所有文字或是 inline element (不管幾層以下) 都會有水平置中的效果！但是 block-level element 並同時設定 width 的元素，則不置中 (但內部的文字或其餘 inline 性質的也會有置中效果）。
  1. 這時候加上 display: inline-block，讓該元素擁有 inline 特性就可以置中。
  2. 加上該元素的固定寬度 (如：px、%)，並搭配下一步的 margin: 0 auto 也可以達成置中效果。

margin: 0 auto;

(主要用在 block-level element)

要讓已設定好固定寬度 (如：px、%) 的區塊水平置中，可以在置中元素內設定 margin:0 auto。若是 inline element ，要加上 display: block 後再設定 margin 就能完成置中。
※ img 預設為 inline element，需要轉換成 block-level element 才能設定 margin 完成置中。雖然被歸類在 inline element，但卻是可以直接設定width、height、margin的，唯獨沒辦法配合margin: 0 auto 進行置中。

position: absolute;
left: 50%;
transform: translateX(-50%);

(上面一段加在置中元素內，記得在父元素裡加上 position: relative;。)

* 設定 position: absolute 的元素會自動忽略 static 的元素，並往更上層去找其他非 static 的父元素來定位。因此父元素的 position 必須要是非預設 (default) 的 static 值。(設定為 relative、absolute 或 fixed 都可以)
* translateX(-50%) 的 50% 是以置中元素為依據。
* 不論是 inline 還是 block-level，有設定寬度還是沒設定寬度，都可以使用！
* 同樣的模式也用在垂直置中。


以下有一個線上的代碼產生器，可以根據你所選擇的條件，整合出適合需要的 CSS 置中範例。
How to Center in CSS
http://howtocenterincss.com/

留言

張貼留言