必须同时添加 flex 和 items-center 类，且父容器需有明确高度（如 h-screen），否则 items-center 无效；默认主轴为水平，justify-center 水平居中，items-center 垂直居中。
用 flex + items-center 居中时，为什么子元素没动？
因为 items-center 只控制交叉轴（默认是垂直方向）对齐，它不会让容器变成 flex 布局——你得先加 flex 类。否则 items-center 完全无效。
- 必须同时写
flex items-center，顺序无关，但缺一不可 - 如果父容器高度为
auto（比如没设h-screen或固定高），即使加了flex items-center，视觉上也看不出居中——因为容器本身没高度可“居” - 常见误写：
items-center单独用在div上，里面放p或span，结果毫无反应
水平+垂直都居中，justify-center 和 items-center 要一起上吗？
是的，但要注意主轴和交叉轴的方向。默认 flex-row（主轴水平），所以 justify-center 水平居中，items-center 垂直居中。
- 完整写法通常是：
flex justify-center items-center - 如果改了主轴方向（比如加
flex-col），justify-center就变成垂直居中，items-center反而管水平了——容易搞反 - 更稳妥的方式：明确写
flex flex-row justify-center items-center，避免隐式依赖 - 注意：这两个类只作用于直接子元素，孙子元素不会被影响
为什么加了 flex items-center，文字反而换行或溢出？
因为 flex 会让子元素默认收缩（flex-shrink: 1），尤其遇到长文本、图片或内联元素时，容易被压缩甚至折行。
- 加
flex-shrink-0阻止收缩，适合按钮、图标等不希望变形的内容 - 对文字容器，可加
whitespace-nowrap防止折行，或overflow-hidden text-ellipsis处理溢出 - 如果子元素是
img，记得加max-w-full h-auto，否则可能撑破容器 - 别忽略 margin/padding 影响：flex 子项的外边距不会合并，但可能意外挤压空间
替代方案：不用 flex，grid 居中更简单？
是的，grid 在居中这件事上更直接，尤其单个子元素场景。
- 写法极简：
grid place-items-center，一行搞定水平+垂直居中 - 兼容性略低于 flex（IE 不支持），但现代项目基本无压力
-
place-items-center等价于justify-items-center align-items-center，不依赖主轴方向 - 注意：
grid容器默认是块级且无间隙，不需要额外设h-full，但依然要确保父容器有高度才能体现居中效果
真正容易被忽略的是：所有这些居中方式，都依赖父容器有明确的高度上下文。没有 h-screen、min-h-screen 或显式 height，再多个 center 类也没法把东西“托”到中间去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
