//html
<div class='parent'>
<div class='child'>#</div>
</div>
//css
//1.定位
.parent{position:relative;}
//子元素
.child{
width:100px;
height:100px;
position:absolute;
//top:50%;
//left:50%;
//margin-top:-50px;
//margin-left:-50px;
top:calc(50%-50px);
left:calc(50%-50px);
}
//2.定位+transform
//子元素
.child{
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
//3.定位+margin
//子元素
.child{
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
//4.Padding
//父元素
.parent{paddign:20px;}
//子元素
.child{height:200px;}
//5.flex
//父元素
.parent{
display:flex;
justify-content:center;
align-items:center;
}
//6.伪元素
.parent{
height:200px;
text-align:center; //只对行内块元素有效
background-color:red;
}
.child{
width:100px;
height:100px;
display:inline-block;
vertical-align:middle;
background-color:blue;
}
.parent::before{
content:'';
width:0;
height:100%;
display:inline-block; //伪元素是行内元素不能设置宽高,转为行内块元素设置宽高
vertical-align:middle;
background-color:yellow;
}
//7.子元素padding属性,背景裁剪到内容
.parent{
width: 600px;
height: 600px;
background: red;
}
.child{
width: 100px;
height: 100px;
padding: calc((100% - 100px) / 2);
background-clip: content-box;
background: blue;
}
水平垂直居中布局
最新推荐文章于 2024-01-29 10:00:00 发布