flex布局中，display: flex + justify-content: center + align-items: center可实现水平垂直居中，需父容器有明确高度（如height: 100vh）、子元素未脱离文档流；ie10–11存在兼容性问题；避免绝对定位与flex混用；移动端推荐min-height: 100dvh；调试时优先检查computed样式中justify-content是否真实生效。
flex布局里justify-content和align-items都设center就行
绝大多数情况下，display: flex + justify-content: center + align-items: center 就能搞定水平垂直居中，不需要绝对定位、transform或负margin。前提是父容器有明确高度（比如height: 100vh），且子元素不是float或position: absolute这类脱离文档流的元素。
- 如果父容器没设高度，子元素会把父容器撑开，看起来“没居中”——其实是父容器本身高度只有内容高
- 子元素若用了
margin: auto，在flex里反而可能干扰对齐，建议删掉 - IE10–IE11支持
flex但对align-items: center在某些场景下有bug，比如子元素是table或设置了min-height
绝对定位+flex组合用法其实多余
标题里说的“flex绝对居中法”容易让人误解：position: absolute 和 display: flex 同时用在同一个容器上，不仅没必要，还可能埋坑。比如给父盒子加了position: absolute又设top: 0; left: 0; width: 100%; height: 100%，本质是手动模拟了flex容器的行为，反而增加维护成本。
- 纯flex方案更轻量，CSS少写4行，也不用管
z-index或层叠上下文问题 - 如果父容器必须绝对定位（比如弹窗遮罩层），那它的子容器直接设
display: flex即可，不需要再给子元素加position: absolute - 曾见有人对子元素同时写
position: absolute和margin: auto，结果在Safari里失效——因为margin: auto在绝对定位下只对left/right生效，对top/bottom无效
移动端要注意min-height和viewport缩放的影响
在iOS Safari或Android Chrome里，如果父容器用min-height: 100vh，页面滚动时可能造成视觉错位；而用height: 100vh又会在地址栏收起/展开时导致高度跳变。这时候align-items: center看似写了，实际位置会偏移。
- 稳妥做法是用
min-height: 100dvh（dynamic viewport height），现代浏览器基本支持，能响应地址栏变化 - 如果要兼容老版本iOS，可配合JavaScript监听
resize事件动态更新高度，但多数场景下直接用100vh加一点容错（比如padding-top: env(safe-area-inset-top)）更实际 - 别忘了检查是否触发了
zoom或user-scalable=no，这些会让vh单位计算失准
flex居中不生效？先看computed style里justify-content是不是真的生效了
开发者工具里看到写了justify-content: center，但子元素还是靠左，大概率是父容器没真正变成flex容器——常见原因是被其他CSS规则覆盖，或者父元素本身是display: inline之类不支持flex的类型。
- 打开浏览器开发者工具，选中父元素，在Computed面板里搜
justify-content，确认值确实是center且来源是你写的样式 - 检查父元素是否被
display: contents、display: none或visibility: hidden干扰 - 子元素如果是
inline元素（如span），flex默认会把它当块级处理，但若它内部有white-space: nowrap或float，也可能影响对齐表现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
