/** 1 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
/** 2 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/** 3 **/
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
/** 4 **/
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
两种以上方式实现已知或者未知宽度的垂直水平居中
最新推荐文章于 2024-10-11 15:51:17 发布
本文详细介绍了CSS中相对定位、绝对定位结合transform、Flexbox以及display:table的居中布局方法,通过实例代码展示了每种方法的具体应用,帮助开发者理解不同场景下如何选择合适的居中策略。
摘要由CSDN通过智能技术生成