1.给小盒子里面加个span标签,给里面的盒子写display:inline-block转换成行内块元素,用vertical-align:middle设置垂直向中间对齐;给父元素设置行高=盒子高度,然后加上text-align:center;
.box {
width: 300px;
height: 200px;
background-color: aqua;
line-height: 150px;
text-align: center;
}
.small {
width: 100px;
height: 50px;
background-color: yellow;
display: inline-block;
vertical-align: middle;
}
2.用定位的方式,给父元素加上相对定位position:relative;子元素加上绝对定位position:absolute(子觉父相),再配合top buttom left right都为0 加上margin:auto。
.box {
width: 300px;
height: 200px;
background-color: aqua;
position: relative;
}
.small {
width: 100px;
height: 50px;
background-color: yellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3用子觉父相 top left:50%配合盒子平移transform:translate(-50%,-50%)
.box {
width: 300px;
height: 200px;
background-color: aqua;
position: relative;
}
.small {
width: 100px;
height: 50px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4.弹性布局:给父元素设置弹性盒,水平方向居中 交叉轴方向居中。
.box {
width: 300px;
height:200px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
.small {
width: 100px;
height: 50px;
background-color: red;
}
5.利用网格布局,大盒子里面嵌套9个小盒子,给父元素设置display:grid;设置成三行三列的样式grid-template-rows:repeat(3,100px)grid-template-columns:repeat(3,100px);给中间的小盒子起个名字 grid-template-areas:“. . .”“. a.”“. . .”;将第五个盒子占据区域a grid-area:a,然后设置个背景颜色就可以了。
.box {
width: 300px;
height: 300px;
border: 1px solid #333;
display: grid;
margin: 100px auto;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-template-areas: ". . ."". a ."". . .";
}
.box .box5 {
grid-area: a;
background-color: red;
}