001-CSS-水平垂直居中布局
方案一：弹性盒子布局
💡 Tips：子盒子不定宽高
.parent {
display: flex;
justify-content: center;
align-items: center;
}
方案二：绝对定位 + transform
Tips：子盒子不定宽高
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方案三：margin + 绝对定位，四个方向为零
Tips：子盒子不定宽高
.son {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
方案四：绝对定位 + margin
Tips：子盒子定宽高
.son {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
方案五：绝对定位 + calc
Tips：子盒子定宽高
.son {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
原文地址：https://blog.csdn.net/loveEveryWeb/article/details/136394121
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！