webview中align-items: center不生效，主因是flex-direction未显式声明导致主轴误判、父容器高度为0无参照基准、svg等内联元素残留baseline对齐，需强制设flex-direction: row、明确高度、svg加display: block。
WebView中align-items: center不生效，先查flex-direction
很多WebView（比如Android 4.4–5.0的系统WebView、微信iOS旧版、部分小程序引擎）默认继承或重置了flex-direction，导致你写的align-items: center实际作用在水平方向上——因为主轴被悄悄设成了column。这不是bug，是渲染引擎对未显式声明值的处理差异。
- 用
getComputedStyle(el).flexDirection在控制台直接读取，别信样式面板里“没写就等于row” - 强制显式声明：
flex-direction: row（水平主轴）或flex-direction: column（垂直主轴），避免隐式 fallback - 微信小程序某些版本对
flex-direction: row有兼容问题，可改用flex-direction: row-reverse再配合justify-content: flex-end反向模拟居中（临时 workaround）
父容器高度为0导致垂直居中失效
WebView（尤其是Android低版本）对height: auto或min-height: 100%解析不稳定，align-items: center在交叉轴（垂直方向）需要明确的高度基准，否则“中”无从谈起。
- 不要依赖
100vh：部分WebView里它被解析为屏幕高度而非视口高度，尤其在地址栏展开/收起时跳变 - 稳妥做法：给父容器设固定高度（如
height: 44px）或使用min-height: 44px - 若必须响应式，用
height: -webkit-fill-available（WebKit系WebView有效）替代100vh - 检查是否父级有
overflow: hidden且子元素撑不开高度——这会让容器高度塌陷为0
SVG图标在WebView里偏移，不是Flex问题而是baseline残留
多数WebView（包括iOS Safari 12–14、微信Android）仍严格继承vertical-align: baseline，即使父容器是Flex，SVG作为行内元素仍会按基线对齐，align-items: center只能对齐那个错位后的盒模型。
- 必须给
<svg></svg>加display: block或display: inline-block，彻底脱离行内流 - 删掉所有
vertical-align相关声明，包括父容器设的font-size: 0这类“补救”写法 - 确认
viewBox是"0 0 W H"格式，避免"10 10 24 24"这类带偏移的值——WebView对viewBox解析更敏感 - 如果SVG是通过
<img src="icon.svg">引入，它默认是inline，同样需加display: block
IE11和老旧WebView共有的align-self优先级陷阱
在Android 4.4 WebView、UC浏览器、部分钉钉内置浏览器中，align-self会覆盖align-items，但行为不一致：有的只覆盖单个子项，有的连margin: auto都失效。
- 避免混用
align-items: center和子元素上的align-self: flex-start——哪怕只是调试时临时加的 - 多个子元素需差异化对齐？改用
margin-top: auto; margin-bottom: auto（仅对单个子元素可靠） - 单子项场景下，
margin: auto比align-items兼容性更好，且不依赖主轴方向 - 检查是否有CSS-in-JS库自动注入了
align-self: stretch（比如某些UI组件库的默认重置）
flex-direction没显式写，它就按自己规则选；比如height没设，它就算出0；比如SVG没设display，它就坚持走baseline。这些细节在Chrome DevTools里看着正常，但在真实WebView里就是差那几像素。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
