不用 AI 自己写 CSS 系列：现代绝对居中不用 transform，Grid 两行就够了！
AI 变成越来越强，前面我也介绍过：10 分钟就搞定用 Claude Code + WordPress Studio 做插件，很多业务代码都能一键生成，更别说 CSS 这种无逻辑的样式语言了。
但过度依赖 AI 编程，有时候自身的开发技能反而会下降，所以偶尔还是要亲手写写代码，尤其是换一种更优的写法，几行代码就能取代之前的几十行代码时，那种干净、优雅、一眼就懂的代码快感，作为程序员，真的特别享受。
今天就带来系列第一篇：现代 CSS 绝对居中的最优写法 —— 不用 transform，不用绝对定位，只用 Grid 两行代码，就能直接实现水平 + 垂直双居中。
传统 transform 居中方案
过去实现元素绝对居中，我们需要同时给父元素和子元素都进行定义：
.parent {
position: relative; /* 父元素设相对定位 */
width: 300px;
height: 200px;
}
.child {
position: absolute; /* 子元素脱离文档流 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 拉回真正居中位置 */
}肉眼可见，这种写法有三个明显问题：
- 代码冗余：跨两个选择器，至少 6 行代码，维护成本高；
- 布局塌陷：子元素脱离文档流，父元素无法被撑开，后续调整样式极易出问题；
- 尺寸依赖：若子元素有固定宽高，还需额外调整数值，灵活性差。
现代 Grid 两行代码搞定
用现代 CSS Grid 实现绝对居中，只需给父元素加 2 个属性，子元素完全不用动，核心代码极简：
.parent {
display: grid; /* 开启网格布局 */
place-items: center; /* 水平+垂直双居中 */
}甚至用 Tailwind CSS 能更极致：直接给父元素加类名 grid place-items-center，一行 HTML 就能实现，连 CSS 都不用写。
这种写法的优势也显而易见：
- 代码量骤减：从 6 + 行缩减为 2 行，代码少 70%，bug 概率也跟着降；
- 保留文档流：无需
position: absolute，子元素正常撑开父元素，布局稳定不塌陷； - 零尺寸依赖：不管子元素是文字、图片、复杂容器，不用知道宽高，都能精准居中；
- 兼容性拉满：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 全支持，覆盖 96% 以上设备，线上使用无压力。
对于 Grid 布局不太熟悉的同学，这里简单说一下核心属性：place-items: center 是 Grid 的「复合属性」，本质是把两个方向的居中整合为一行，等同于：
/* place-items: center 等同于下面两行 */
align-items: center; /* 垂直方向（纵轴）居中 */
justify-items: center; /* 水平方向（横轴）居中 */给父元素开启 display: grid 后，父元素变成网格容器，子元素自动成为「网格项目」，在这两个属性的作用下，会被精准定位到容器的正中心位置。
总结两句
现代 CSS 的核心逻辑就是「用更简洁的代码，实现更稳定的效果」，告别 transform 居中的老旧写法，用 Grid 两行代码实现绝对居中，不仅能让开发效率翻倍，还能彻底避开布局塌陷的坑。
AI 确实能帮我们快速生成代码，但真正理解 CSS 底层逻辑、亲手写出干净优雅的样式，这份成就感和乐趣，是 AI 替代不了的，这也是我们坚持自己偶尔手写一下 CSS 的意义。
