一行 CSS 让元素完美居中（水平+垂直）

你是否还在写复杂的 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