一：绝对定位 (margin: auto)
div {
width: 200px
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
二：绝对定位 (margin 负间距)
div {
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
三：绝对定位 (Transforms 变形)
div {
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
四：弹性盒子
.box {
height:600px;
display:flex;
justify-content:center;
align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div {
background: green;
width: 200px;
height: 200px;
}
