1.flex布局
.out-box {
width: 600px;
height: 600px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
}
.inner-box {
width: 200px;
height: 200px;
background-color: beige;
}
2.flex配合margin
.out-box {
width: 600px;
height: 600px;
background-color: aquamarine;
display: flex;
}
.inner-box {
width: 200px;
height: 200px;
background-color: beige;
margin: auto;
}
3.定位配合transform
.out-box {
width: 600px;
height: 600px;
background-color: aquamarine;
position: relative;
}
.inner-box {
width: 200px;
height: 200px;
background-color: beige;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
4.定位配合margin
.out-box {
width: 600px;
height: 600px;
background-color: aquamarine;
position: relative;
}
.inner-box {
width: 200px;
height: 200px;
background-color: beige;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
5.Grid布局
.out-box {
width: 600px;
height: 600px;
background-color: aquamarine;
display: grid;
place-items: center;
}
.inner-box {
width: 200px;
height: 200px;
background-color: beige;
}