[CSS] 元素置中的N 個方法
文章推薦指數： 80 %
元素置中是調控CSS 時必然會遇到的問題，也是Junior 前端工程師面試的熱門考題。
這篇列出常見的置中方式。
定義限制條件：. 讓子元素水平、垂直皆居中 ...
Eudora
FrontendDeveloperTaipeiCity,Taiwan
TaipeiCity,Taiwan
[email protected]
[email protected]
GitHub:eudora-hsjLinkedIn:eudora-huangTwitter:eudora_hsjMedium:eudora-hsjbookTableofContents寫法1：Flex標配置中屬性寫法２：Flex+Marginauto寫法3：Absolute+TRBL0+Marginauto寫法４：Absolute+LT50%+Translate-50%寫法５：Relative+LT50%+Translate-50%寫法６：偽元素+inline-block+vertical-align+text-align參考文件comment
Comments
[CSS]元素置中的N個方法
[CSS]語法-選擇器
|
[CSS]Sass新手入門(3)函數應用
(Updated:2022-01-08)
2020-09-24
元素置中是調控CSS時必然會遇到的問題，也是Junior前端工程師面試的熱門考題。
這篇列出常見的置中方式。
定義限制條件：讓子元素水平、垂直皆居中：
置中的設定不能寫死特定的偏移值
(當父／子元素的寬高有變化時仍要維持居中)ps.下列範例以兩個div--父（.container)、子(.box)結構為例：
#寫法3：Absolute+TRBL0+Marginauto.container{
position:relative;
.box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
}
>CodepenDemo(opensnewwindow)position:absolute指定top/right/bottom/left 時是以「第一個有定位的父層容器」為位移基準。
有定位是指position為relative/absolute/fixed若想指定依據的父層沒有特別定義position時，可定義為relative而不影響本來的排版（因為relative在未指定top/right/bottom/left時不會有任何改變）。
如果所有父層都沒有定位，則將對齊「window視窗」將top/right/bottom/left指定為0時，會自動計算為可運用的空間。
margin:auto：將剩餘空間做自動分配
#寫法４：Absolute+LT50%+Translate-50%.container{
position:relative;
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
}
>CodepenDemo(opensnewwindow)類似方法3position:absolute依據其「有定位的父層」做位移。
top:50%、left:50%進行向下、右位移50%：但因物件對齊點為左上角，故須進行X、Y軸負向偏移50%讓對齊點為物件中心：transform:translate(-50%,-50%) 才可真正置中。
#寫法５：Relative+LT50%+Translate-50%.container{
.box{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
}
>CodepenDemo(opensnewwindow)類似做法4。
position:relative指定top/right/bottom/left 時為原本位置做偏移。
#寫法６：偽元素+inline-block+vertical-align+text-align.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;
}
}
>CodepenDemo(opensnewwindow)#參考文件連續30天的超實務網頁設計的垂直置中教學／Amos(opensnewwindow)23種CSS垂直置中技巧／Amos(opensnewwindow)CSS垂直置中的七個方法／oxxo(opensnewwindow)CSS垂直置中的三個方法／oxxo(opensnewwindow)探秘flex上下文中神奇的自動margin(opensnewwindow)⮩本文同步發表在第12屆iT邦幫忙鐵人賽《For前端小幼苗的圖解筆記》(opensnewwindow)
[CSS]元素置中的N個方法
[CSS]語法-選擇器
|
[CSS]Sass新手入門(3)函數應用
延伸文章資訊
- 1用css讓div垂直置中的方式 - 網頁設計
在網頁排版上，要讓div垂直置中是經常遇到的問題，這裡介紹幾個常見的解決方式。 1.line-height. 這是初學者一開始會學到的方法，雖然相當簡單，但僅適用於單行文字 ...
- 2CSS 垂直置中的七個方法
或許有些人會發現，在表格這個HTML 裡面常用的DOM 裏頭，要實現垂直置中是相當容易的，只需要下一行 vertical-align:middle 就可以，為什麼呢？
- 3HTML 水平置中與垂直置中 - Wibibi
在做網頁設計的時候常常會用到置中的技巧，無論是文字或圖片，總是會有這樣的需求來配合排版（如果你想採用CSS 的DIV 來做排版，可以參考此篇：CSS DIV 置中）， ...
- 4[CSS] 套用水平垂直置中到文字或任何區塊 - 偵錯桐人
因為自己在設計網頁時都會忘記要怎麼做水平垂直置中，所以特別寫一篇來當筆記。這邊第一次嘗試用CodePen 來讓訪客能同時比對程式碼和執行結果， ...
- 5[CSS] 垂直置中的方法| PJCHENder 未整理筆記
在學習網頁排版的過程中，置中（不論垂直或水平）一直是個相當麻煩的事，關於CSS 中置中的方式，網路上可以 ... 以下是之後示範中HTML Body 的部分：.
