CSS实现块元素垂直水平居中有几种方法:
- 使用Flexbox布局
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
- 使用绝对定位和负边距
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 使用table-cell
.container {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
- 使用grid布局
.container {
display: grid;
place-items: center; /* 水平垂直居中 */
}
需要注意的是,以上方法并不是适用于所有情况的,有些情况需要根据实际情况选择不同的方法。