[筆記] CSS 上常見的水平置中 & 垂直置中方法

章節連結

CSS 常見的老問題之一的對齊問題,這邊筆記一下目前自己常用以及網路上流傳的各種置中方法,分為水平和垂直兩塊。
css3 logo


基礎知識

HTML 的元素有預設的 display 屬性,這點要先清楚,才能避免一些麻煩。完整版的文件可以看這邊。

  1. inline: <span>, <a>, <input> ……等:預設為不換行,由內容大小決定寬度,無法設定 width, height, margin 和 bottom
  2. block: <div>, <nav>, <section>, <nav> ……等:預設為佔滿父元素 100%
  3. inline-block: 結合上述兩者,外層 inline 裡層 block,可以多個並排。當你的 <div> 想要橫向排列,這就是一個可用的方式。

水平置中排列

inline 元素

在父元素下宣告 text-align,裡頭的 inline 元素就會自動套用。

block 元素

在元素本身上運用 margin 屬性,語法為 margin: 0px auto,會依照左右寬度自行縮放。

inline-block 元素

依照 inline 元素來套用即可。請小心,float:left 系列的語法,要搭配 clear:both 之類的語法來避免高度塌陷的問題。

DEMO


垂直置中排列

傳統方式

  1. Line-height+單行文字:運用設定文字行高,會在其正中央位置
  2. Line-height+多行文字:同上概念,被要垂直置中的元素用 div 包起來,並設置 inline-block & vertical-align
  3. 運用 :before + inline-block:將偽元素和要對齊的子元素皆設定為 inline-block,就可以用 vertical-align 了
  4. Absolute + margin 負值(調整位置用)
  5. Absolute + translate:絕對位置 + 百分比調整

Flex 系列

  1. 兩層 div 包夾,父層下 display:flex、align-items: center。
  2. 兩層 div 包夾,父層下 display:flex,子層下 margin:auto 0。
  3. 兩層 div 包夾,父層下 display:flex,子層下 align-self: center。

Display:table-cell

將 div 設定為表格的 td,那麼你就可以用儲存格垂直對齊的 vertical-align:middle。

DEMO


參考資料

  1. CSS垂直置中技巧,我只會23個,你會幾個
  2. [CSS] 水平置中與垂直置中(傳統作法)
按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:124