你是否还在写复杂的 margin 或 position 来居中元素?其实只要一行 CSS 就能搞定!
css
复制编辑
.parent {
display: flex;
justify-content: center;
align-items: center;
}
配合 HTML:
html
复制编辑
<div class="parent">
<div class="child">我在正中间</div>
</div>
✅效果:子元素 .child 在父容器 .parent 中水平垂直都居中。
🧠小技巧:
- 父元素需要有高度,常用于弹窗、卡片、登录框;
- 适用于响应式布局,兼容性非常好(IE10+);
- 想扩展多行文本居中也完全没问题!
参考
https://blog.csdn.net/qqqdqd/article/details/149209167
https://blog.csdn.net/qqqdqd/article/details/149209090
https://blog.csdn.net/qqqdqd/article/details/149208922
https://blog.csdn.net/qqqdqd/article/details/149209254
https://blog.csdn.net/qqqdqd/article/details/149209491
https://blog.csdn.net/qqqdqd/article/details/149209582