CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)
- 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到CSS居中問(wèn)題時(shí)有章可循.
- 參考Centering in CSS: A Complete Guide和【基礎(chǔ)】這15種CSS居中的方式乃秀，你都用過(guò)哪幾種
- 本文的引用歸原作者所有.
- 代碼在線演示工具JSbin使用指南
1.Horizontally 水平居中
1.1 inline或inline-*元素水平居中
給需要居中的元素一個(gè)block父元素,需要居中子元素為 文本 或者 inline, inline-block, inline-table, inline-flex
核心代碼
.center-children {
text-align: center;
}
JSbin演示地址
效果:
1.2block元素水平居中
父元素為block,子元素也為bolck,且子元素設(shè)置了寬度(沒(méi)寬度子元素就繼承父元素寬度,居中沒(méi)有意義).
無(wú)論正在居中塊級(jí)元素的寬度或父級(jí)的寬度如何，都會(huì)起作用您访。
方法:子元素margin: 0 auto;左右外邊距設(shè)置為自動(dòng)填充
核心代碼
.center-me {
margin: 0 auto;
}
效果:
1.3多個(gè)block元素水平居中
1.3.1 多個(gè)block元素一行排列水平居中
- 方法一:利用
inline-block,原理是將子元素轉(zhuǎn)化為inline-block.再用text-align: center; - 方法二:利用
display: flex.注意:子元素高度會(huì)保持一致.看下方例子.
核心代碼:
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
效果:
多個(gè)
block元素一行排列水平居中JSbin演示地址
1.3.2 多個(gè)block元素每行一個(gè)水平居中
因?yàn)槊總€(gè)block元素獨(dú)占一行,所以方法仍然是margin: 0 auto;
演示:
多個(gè)block元素每行一個(gè)水平居中JSbin演示
2.Vertically垂直居中
垂直居中比較麻煩
2.1 inline 或 inline-* 元素單行垂直居中
需要垂直居中的元素為單行的inline 或 inline-* 元素,例如一個(gè)text或者a鏈接(包括a鏈接變化而成的按鈕)
2.1.1 方法一:上下使用相同的padding(推薦)
上下和左右使用相同的padding可以不用設(shè)置寬高,既可以在修改文本內(nèi)容是自適應(yīng),又可以減少出現(xiàn)BUG的幾率.
核心代碼:
.link {
padding-top: 30px;
padding-bottom: 30px;
}
演示:
2.1.2 方法二:設(shè)置line-height與高度相同
核心代碼
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
/*nowrap文本內(nèi)的換行無(wú)效內(nèi)容只能在一行顯示*/
}
設(shè)置line-height與高度相同JSbin演示地址
2.2 多行文本垂直居中
多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需設(shè)置寬高,推薦使用.
如果這樣做不起作用产还，那么文本所在的元素可能是table或者table-cell元素黄刚，無(wú)論是真正的table還是后期自己添加的CSS.
下面說(shuō)說(shuō)這兩種情況使用其他方法的垂直居中.
2.2.1:方法一:display: table;和vertical-align: middle;
核心代碼:
.center-table {
display: table;
}
.center-table p {
display: table-cell;
vertical-align: middle;
}
table+vertical-align: middle多行文本垂直居中JSbin演示
2.2.2 使用flex布局多行文本居中
一個(gè)flex-child可以簡(jiǎn)單地在flex-parent的中心.
核心代碼
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
2.3 block元素垂直居中
2.3.1已知block元素高度
原理是絕對(duì)定位,top: 50%;然后 margin-top設(shè)置為負(fù)邊距且值為他本身高度的一半.
核心代碼:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
注意:使用
position: absolute;絕對(duì)定位會(huì)使元素脫離文檔流
2.3.2 block元素高度未知垂直居中
借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中时呀。但是部分瀏覽器存在兼容性的問(wèn)題。
核心代碼:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
block元素高度未知垂直居中JSbin演示
2.3.3 使用flex布局block元素高度未知垂直居中
核心代碼:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
3.Both Horizontally and Vertically水平垂直居中
3.1有固定寬高的元素
核心代碼:
依舊是絕對(duì)定位+寬高一半的負(fù)邊距
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
3.2 寬高不固定
利用2D變換欧漱，在水平和垂直兩個(gè)方向都向反向平移寬高的一半，從而使元素水平垂直居中葬燎。
核心代碼
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.3 使用flex布局垂直水平居中
核心代碼:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
3.4 使用grid布局垂直水平居中
核心代碼:
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}
