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)!