本文介绍了六种不同的CSS技巧来实现网页元素的居中布局，包括使用Flexbox、绝对定位结合transform属性等方法，每种方法都有其适用场景。
1------------------------------------------------------------------
.box1{
display:flex;
justify-content:center;
align-items:center;
.box2{
}
}
2------------------------------------------------------------------
.box1{
position:relative;
.box2{
position:absolute;
left:50%;
right:50%;
margin-left:负子元素一半宽度；
margin-top:负子元素一半高度;
}
}
3------------------------------------------------------------------
.box1{
position:relative;
.box2{
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%);
}
}
4------------------------------------------------------------------
.box1{
position:relative;
.box2{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
}
5------------------------------------------------------------------
.box1{
display:flex;
.box2{
margin:auto;
}
}
6------------------------------------------------------------------
.parent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son {
background-color: pink;
display: inline-block;
}
-------------------------------------------------------------
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
