Web前端

彻底解决 CSS 的居中问题：现代 Web 水平垂直居中全景方案

1 min read

“如何用 CSS 实现居中”是前端开发中最经典的话题。从早期的 text-align: center、margin: auto，到如今主流的 Flexbox 与 CSS Grid，居中方案经历了一场技术演进。本文为您梳理最优雅、兼顾现代标准与传统场景的居中方案。

一、 现代首选：Flexbox 弹性盒居中（强烈推荐）

无论子元素是文本、图片还是块级容器，无论是定宽定高还是动态宽高，Flexbox 都是目前最通用、最简单的居中方式：

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

二、 极致极简：CSS Grid 居中（仅需 2 行代码）

在现代浏览器中，CSS Grid 提供了最精简的居中语法：

.parent {
    display: grid;
    place-items: center; /* 一行搞定水平与垂直双向居中 */
}

三、 经典定位方案：绝对定位 + CSS3 Transform

在弹窗（Modal）、遮罩层或必须脱离文档流的场景中，使用绝对定位与负平移：

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 无论子元素宽高多少，均可完美居中 */
}

四、 传统场景速查总结

场景类型 核心 CSS 属性 说明
行内元素/文字水平居中 text-align: center; 作用在父容器上，对文字、span、img 生效
单行文本垂直居中 line-height: 高度值; 将行高 line-height 设置与容器 height 相等
定宽块级元素水平居中 margin: 0 auto; 必须指定 width（或 max-width）
#Web前端