1
1.
.father{
width:200px;
height:200px;
position: relative;
}
.child {
width:100px;
height:100px;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
margin-left: auto;
}
2. .child {
width:100px;
height:100px;
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
}
3. .child {
width:100px;
height:100px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%)
}
4.
.father{
width:200px;
height:200px;
display: flex;
/*主轴上水平居中*/
justify-content: center;
/*副轴上水平居中*/
align-items:center
}
5.
.child{
display:-webkit-box;
-webkit-box-pack: center;
-webkit-box-align:center;
}

本文介绍了五种在CSS中实现元素居中的方法:1) 使用相对定位和自动外边距;2) 通过设置左右顶部和底部为0,然后使用负的margin值;3) 应用transform属性进行平移;4) 利用flexbox布局居中;5) 使用老式的盒模型配合CSS盒对齐。这些方法涵盖了不同场景下的居中需求。

被折叠的 条评论
为什么被折叠?



