CSS有多種方法可以實現垂直水平居中,以下是其中幾種常用的方法:
display
屬性設置為flex
,并使用align-items: center
和justify-content: center
來實現垂直和水平居中。.parent {
display: flex;
align-items: center;
justify-content: center;
}
position
屬性設置為absolute
,然后使用top: 50%
和left: 50%
將元素的左上角定位到父容器的中心點,最后使用transform: translate(-50%, -50%)
將元素向左上角偏移自身寬度和高度的一半。.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
display
屬性設置為table
,然后將子元素的display
屬性設置為table-cell
,使用vertical-align: middle
實現垂直居中,使用text-align: center
實現水平居中。.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
這些方法只是其中的幾種,根據實際情況選擇合適的方法來實現垂直水平居中。