元素居中对齐的方式

用父元素设置position:relative
1:#box2{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
2::#box2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
3:#box2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
直接设置父元素
4:#box1 {
display: flex;
justify-content: center;
align-items: center;
}
5:#box1 {
display: grid;
place-items: center;
}
6：#box1 {
width: 600px;
height: 600px;
border: 1px solid #007AFF;
margin: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#box2 {
background-color: #007AFF;
width: 300px;
height: 300px;
display: inline-block;
}