#09 [CSS] 元素置中的 N 個方法

題目定義:使元素水平/垂直居中

元素置中是調控 CSS 時必然會遇到的問題,也是 Junior 前端工程師面試的熱門考題。
這篇列出常見的置中方式

,設定題目條件:
  1. 讓子元素水平、垂直皆居中:
  2. 置中的設定不能寫死特定的偏移值
     (當父/子元素的寬高有變化時仍要維持居中)
  3. 下列範例以 以兩個 div 父(.container)子(.box)結構為例
1
2
3
4
<div class="container">
<div class="box">
</div>
</div>

寫法1:Flex 標配置中屬性

1
2
3
4
5
.container{
display: flex;
justify-content: center;
align-items: center;
}

> Codepen Demo

  1. 將父層設為 display: flex
  2. 定義 Flex 子物件
    • justify-content:center  主軸對齊方式:居中
    • align-items:center  次軸對齊方式:居中

寫法2:Flex + Margin auto

1
2
3
4
5
6
7
.container{
display: flex;

.box{
margin: auto
}
}

> Codepen Demo

  • margin: auto:將剩餘空間自動分配
  • display 設為 grid / inline-flex / inline-grid 定義完整空間。

寫法3:Absolute + TRBL 0 + Margin auto

1
2
3
4
5
6
7
8
9
10
11
12
.container{
position: relative;

.box{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}

> Codepen Demo

  • position: absolute 指定 top / right / bottom / left 時是以「第一個有定位的父層容器」為位移基準。
  • 有定位是指 positionrelative / absolute / fixed
    • 若想指定為對整依據的父層但原先沒有特別指定 position 又不想影響到該排版,可直接指定為 relative,因為 relative 在未指定 top / right / bottom / left 時不會有任何改變。
    • 如果所有父層都沒有定位,則將對齊「視窗」
  • top / right / bottom / left 指定為 0 時,會自動計算為可運用的空間。
  • margin: auto:將剩餘空間做自動分配
  • 注意:此方法只適用於定位物件要有明確寬度與高度!

寫法4:Absolute + LT 50% +Translate -50%

1
2
3
4
5
6
7
8
9
10
.container{
position: relative;

.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}

> Codepen Demo

  • 類似方法 3
  • position: absolute 依據其「有定位的父層」做位移。
  • top: 50%left: 50% 進行向下、左位移 50%:
  • 但因物件對齊點為左上角,故須進行 X、Y 軸負向偏移 50% 讓對齊點為物件中心:transform: translate(-50%,-50%) 才可真正置中。

寫法5:Relative + LT 50% +Translate -50%

1
2
3
4
5
6
7
8
9
.container{

.box{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
}

> Codepen Demo

  • 類似做法4。
  • position: relative 指定 top / right / bottom / left 時為原本位置做偏移。

寫法6:偽元素 + inline-block + vertical-align + text-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
text-align: center;
font-size: 0;

&:after{
content: '';
height: 100%;
vertical-align: middle;
display: inline-block;
width: 0px;
}

.box{
display: inline-block;
vertical-align: middle;

}
}

> Codepen Demo


參考文件


昨晚在電腦前莫名其妙被周公抓走,還好趕在灰姑娘的午夜 12 點前魂魄歸來、踩線發文,看來這幾天的文都在敘述概念(Git / HTML)……實在太催眠了。
為防又不小心被周公抓去太久而在昏迷中斷賽(為什麼不提早發!!),決定不照目錄寫作了(真是個任性的傢伙R)!
接下來直接來寫實用的範例吧!畢竟已經寫到快第 10 篇,還沒寫幾行 code ,甘那母湯~


⮩ 本文同步發表在第 12 屆 iT 邦幫忙鐵人賽 《For 前端小幼苗的圖解筆記》

Comments