父容器未设height或min-height导致flex居中失效；最常见原因是高度塌陷，使交叉轴长度为0，align-items无法计算居中位置，需设置min-height:100vh或100dvh并确保父容器有可计算高度。
父容器没设 height 或 min-height，导致 flex 居中失效
写了 display: flex 和 align-items: center 却不生效，最常见原因是父容器高度塌陷——比如只写了 width，没设 height 或 min-height，内部又没内容撑开。此时交叉轴长度为 0，“居中”无从计算。
检查 computed styles：如果父容器 height 是 0px，那 align-items 就是摆设。
- 全屏场景优先用
height: 100vh，但 iOS Safari 中地址栏缩放会导致vh失准，可补min-height: 100%+html, body { height: 100% } - 避免对
body直接设display: flex，容易干扰全局样式；建议包一层.container再控制 - 若父容器本身被其他元素遮挡（比如
position: fixed的导航栏），需确认它的z-index是否足够高
absolute + transform 居中时父容器没设 position: relative
top: 50% + transform: translateY(-50%) 看似万能，但一旦父容器是 position: static（默认值），top 就会相对于 viewport 计算，滚动时元素飘走，还可能被其他 fixed 元素盖住。
典型现象：弹窗在桌面端正常，一滚动就偏移或消失；移动端常因视口缩放叠加定位错乱。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须给父容器加
position: relative（或absolute/fixed） - 同时水平居中要配
left: 50%+transform: translate(-50%, -50%)，顺序不能反 - 如果父容器本身有
overflow: hidden，且子元素 transform 后超出边界，也会被裁切——这时得调父容器的overflow或改用 flex
z-index 层级冲突让居中元素被盖住
垂直居中本身不解决层级问题。即使元素位置正确，也可能因为 z-index 太低，被导航栏、遮罩层、广告位等覆盖。
常见于 Vue/React 组件中动态渲染的弹窗、提示框——它们的 z-index 常写死为 1 或 10，而第三方 UI 库的 header 默认是 100 以上。
- 不要依赖默认 stacking context；显式设
z-index，并确保父容器有定位（position: relative等）才能触发层级 - 避免用超大数值如
z-index: 9999，用语义化层级（比如z-index: 10for header,20for modal,30for toast） - 检查是否多个同级容器都用了
position: absolute但没设z-index，此时 DOM 顺序决定覆盖关系，容易误判
grid 的 place-items: center 在复杂布局里意外覆盖原有对齐
display: grid; place-items: center 简洁有力，但它是批量作用于所有直接子元素的。如果父容器已有 grid-template-areas 或轨道定义，再加 place-items 可能覆盖原有 justify-self/align-self 设置，导致部分子元素“突然偏移”。
更隐蔽的是：某些 CSS 框架（如 Tailwind）的 utility class 可能悄悄注入 place-content 或 justify-items，和你的 place-items 冲突。
- 只在单子元素场景下无脑用
place-items: center；多子元素时优先用justify-content: center; align-items: center - IE11 不支持
place-items，回退方案要写justify-items: center; align-items: center - 若父容器是表格或 flex 容器，
display: grid会彻底重置布局上下文——别混用
height、position、z-index 和 stacking context；再逐层往上查父容器的尺寸和定位状态。遮挡问题从来不是单一属性的事，而是高度、定位、层级三者咬合的结果。 
