前端基礎(chǔ)問題：CSS居中的幾種方式
點(diǎn)擊上方藍(lán)色字體，選擇“標(biāo)星公眾號”
優(yōu)質(zhì)文章，第一時(shí)間送達(dá)
作者 | Du9191
來源 | urlify.cn/UnUJv2
水平居中：
（1）內(nèi)聯(lián)元素：
text-align: center;利用 text-align: center ；可以實(shí)現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。
如果一行中有多個(gè)塊級元素，可以通過設(shè)置塊級元素的顯示類型為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。
注意：此方法對內(nèi)聯(lián)(inline), 內(nèi)聯(lián)塊(inline-block),內(nèi)聯(lián)表(inline-table), 內(nèi)聯(lián)塊級彈性盒(inline-flex)元素水平居中都有效。
（2）塊級元素：
margin: 0 auto；注意：當(dāng)塊級元素的寬度固定時(shí)，可通過margin: 0 auto；使塊級元素水平居中。（未定寬度，居中無效）
（3）絕對定位+2D平移：
position: absolute；
left:50%；
transform: translateX(-50%)；注意：當(dāng)塊級元素的寬度不固定時(shí)，可通過絕對定位配合2D平移（平移相對于自身寬高的百分比），使塊級元素水平居中。
（4）彈性盒子使用justify-content屬性：
display: flex；
justify-content: center；注意：需將父盒子設(shè)置為彈性盒子，利用justify-content 屬性（用于設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式）實(shí)現(xiàn)水平居中。
垂直居中：
（1）內(nèi)聯(lián)元素：
vertical-align:middle;vertical-align是用來指定內(nèi)聯(lián)元素或者表格單元格元素的垂直對齊方式。
可被用于：使內(nèi)聯(lián)元素盒模型與其內(nèi)聯(lián)元素容器垂直對齊。用于垂直對齊一行文本的內(nèi)的圖片，垂直對齊表格單元內(nèi)容。
注意：使用vertical-align要清楚基線、邊界的概念
vertical-align只對內(nèi)聯(lián)元素（inline、inline-block、inline-table）、表格單元格元素（table-cell）生效。不能用它垂直對齊塊級元素。
（2）行高與高度一致：
line-height: **px;
height: **px;內(nèi)聯(lián)元素的高度(height)和行高(line-height)相等時(shí)，元素垂直居中。
（3）塊級元素：
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
注意：當(dāng)塊級元素的高度固定時(shí)，通過絕對定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，使塊級元素垂直居中。
（4）絕對定位+2D平移：
position: absolute;
top: 50%;
transform: translateY(-50%)；注意：當(dāng)塊級元素的高度不固定時(shí)，可通過絕對定位配合2D平移（平移相對于自身寬高的百分比），使塊級元素垂直居中。部分瀏覽器存在兼容性的問題。
（5）彈性盒子使用 align-items屬性：
display: flex；
align-items: center；注意：需將父盒子設(shè)置為彈性盒子，利用align-items 屬性（用于設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式）實(shí)現(xiàn)垂直居中。
（6）利用表布局（table）
display:table；
display:table-cell；注意：父容器設(shè)為display:table讓他成為一個(gè)塊級表格元素，子元素display:table-cell使子元素成為表格單元格，
然后就像在表格里一樣，給子元素加個(gè)vertical-align: middle就行了,多行文字垂直居中。（常規(guī)的登錄及注冊頁面都需要用到）
（7）精靈元素(ghost element)技術(shù)
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
在父容器內(nèi)放一個(gè)100%高度的偽元素，讓文本和偽元素垂直對齊，從而達(dá)到垂直居中的目的。個(gè)人認(rèn)為本質(zhì)就是第（1）種方法。
水平垂直居中：
（1）固定寬高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
}
（2）不定寬高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
（3）利用flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
（4）利用grid布局（兼容性較差，不推薦）
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
（5）利用表布局（table）
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}
粉絲福利：Java從入門到入土學(xué)習(xí)路線圖
??????
??長按上方微信二維碼 2 秒
感謝點(diǎn)贊支持下哈 