1.使用绝对定位和负边距:
.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.使用Flexbox布局:
.container {
display: flex;
justify-content: center;
align-items: center;
}
3.使用表格布局:
css
.container {
display: table;
width: 100%;
height: 100%;
}
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
4.使用网格布局:
.container {
display: grid;
place-items: center;
}
div盒子绝对居中的几种方式
最新推荐文章于 2023-09-20 13:51:42 发布