place-items: center最稳，因它是一条二维指令，同时控制水平垂直居中，不依赖子元素宽高或父容器显式高度，且容错性高、代码最少。
直接给父容器加 display: grid 和 place-items: center，90% 场景下最稳、代码最少、不依赖子元素宽高或父容器显式高度。
为什么 place-items: center 比 justify-content + align-items 更适合“自动居中”
它是一条二维指令，同时控制水平和垂直方向，且不关心主轴方向（flex-direction 是 row 还是 column 完全无关）。而 justify-content 和 align-items 是 Flexbox 的一维组合，必须配对使用，还隐含要求父容器在交叉轴上有可计算高度——比如没写 min-height: 100vh，align-items: center 就会“失效”，实际不是失效，是容器自身高度为 0，居中结果不可见。
常见错误现象：align-items: center 在开发者工具里被划掉，或子元素纹丝不动。大概率是父容器没设 display: flex，或者设了但父容器高度塌陷。
-
place-items只作用于直接子元素，且子元素不能是position: absolute或display: contents - 旧版 Safari（≤15.4）不支持
place-items，需降级为align-items: center; justify-content: center;（注意：这里用的是justify-content，不是justify-items） - Grid 不吃
float、vertical-align这些老式属性干扰，容错性比 Flexbox 高
margin: auto 在 Flex 容器里为什么有时“看起来没反应”
它只在 Flex 容器中对单个子元素生效，且前提是该子元素**没有撑满主轴空间**。一旦子元素写了 width: 100%、flex: 1 或 height: 100%，margin: auto 就失去分配空间的余地。
- 子元素是块级且无宽高限制时，
margin: auto才能触发水平+垂直居中 - 若只想要水平居中，写
margin: 0 auto；只垂直居中则写margin: auto 0 - 容器用了
flex-direction: column，margin: auto默认居中的是水平方向（因为此时交叉轴是水平的），容易误判
绝对定位 + transform 居中为何比负 margin 更实用
因为 transform: translate(-50%, -50%) 的计算基准是元素自身尺寸，不需要提前知道宽高值。而负 margin 要求你硬编码一半宽高，一旦元素是响应式、图片未加载完成、或内容动态变化，就会偏移。
- 必须确保父容器有
position: relative（或其他非static值），否则top: 50%会相对于视口定位 - 如果父容器设置了
overflow: hidden或存在滚动条，居中元素可能被裁剪，视觉上像“没居中” - 该方法对
display: inline元素也有效，而 Flex/Grid 要求子元素是块级或受容器规则约束
真正容易被忽略的一点：居中是否“生效”，往往不是 CSS 写错了，而是父容器被 overflow: hidden 截断、子元素意外脱离文档流（比如加了 position: absolute 却忘了调 top/left）、或盒模型里 padding/border 没算进宽高导致空间预估错误。先查结构，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
