父容器高度塌陷是移动端居中的头号敌人，因ios safari或android webview中align-items: center失效常源于父容器实际高度为0，尤其当仅含文字、图片等未撑开内容时；100vh在地址栏收起/展开时跳变导致居中偏移，须显式设min-height: 100vh并加min-height: -webkit-fill-available兜底ios；若父容器为，需确保html, body { height: 100%; margin: 0; }；避免依赖height: 100%继承，因移动端父级默认高度不可靠；safari旧版对flex+margin: auto存在兼容性陷阱，子元素禁用margin: auto；默认inline需vertical-align: middle或display: block；伪元素或浮动会导致text-align: center失效，应加overflow: hidden或display: flow-root创建bfc；place-items: center在低端安卓webview中不支持，应回退至justify-items: center; align-items: center；排查时优先查看computed面板中height与display值。
父容器高度塌陷是移动端居中的头号敌人
在 iOS Safari 或 Android WebView 中，align-items: center 常常“看起来没反应”，根本原因是父容器实际高度为 0——尤其当它只包含文字、图片等未撑开内容时。100vh 在地址栏收起/展开时还会跳变，导致居中位置瞬间偏移。
- 必须显式设置父容器高度：优先用
min-height: 100vh，再加min-height: -webkit-fill-available兜底 iOS - 若父容器是
，确认已重置：html, body { height: 100%; margin: 0; } - 避免依赖
height: 100%向上继承——移动端很多父级默认高度不可靠，直接写死或用视口单位更稳
Safari 对 flex + margin: auto 的兼容性陷阱
在 iOS 15+ 之前，Safari 会把 margin: auto 和 align-items: center 同时作用于子元素，造成上下方向意外偏移，视觉上像“居中失败”。这不是 bug，而是渲染顺序差异。
- 子元素绝对不要写
margin: auto—— 即使你只想要水平居中，也得删掉 - 如果子元素是
<img>，默认是 inline 元素，基线对齐会导致垂直方向下沉；加vertical-align: middle或设display: block - 避免给子元素设
flex: 1或width: 100%，除非真需要拉伸；它们会干扰 flex 主轴尺寸计算
伪元素和浮动让 text-align: center 失效却不报错
text-align: center 在移动端看似写了却无效，往往不是属性没生效，而是父容器“没有可居中的宽度基准”——比如伪元素 ::after 用了 position: absolute，导致父容器高度塌陷，或者父容器本身被 float 拉出文档流。
- 检查父容器是否无意中设置了
float: left或position: absolute—— 这会让text-align失去作用对象 - 伪元素脱离文档流后，父容器可能无法正确计算自身宽高；加
overflow: hidden或display: flow-root强制 BFC 可修复 -
text-align: center只影响行内内容；若想居中一个<div>，它必须是 <code>inline-block或配合margin: 0 auto（且有明确width）place-items: center 在低端安卓 WebView 里根本不存在
部分国产安卓 App 内置 WebView 基于旧版 Chromium（如 57 以下），不支持
place-items，连降级语法都不触发。写了等于白写，控制台也不会报错。- 用
display: grid时，先确认目标环境最低支持版本；不放心就回退到justify-items: center; align-items: center; - 避免在同一个父容器上混用
place-items和justify-content—— 前者会覆盖后者对子元素的对齐控制 - 如果父容器已有
grid-template-areas，place-items可能被轨道定义压制，此时单独给子元素加place-self: center更可控
height和display看两秒，比反复改样式高效得多。 - 用
