路由切换后flex居中失效的根本原因是父容器高度塌陷，导致align-items: center缺乏交叉轴参考长度；需确保父容器有明确高度来源（如min-height: 100vh），并避免样式作用域中断、定位上下文丢失及无障碍焦点丢失。
路由切换后flex居中突然失效？检查父容器高度是否塌陷
SPA路由切换本身不会重置CSS，但常见问题是：新渲染的视图容器（比如 <main id="app">）在首次挂载时没内容、没显式高度，导致 display: flex; align-items: center 失效——因为交叉轴（垂直方向）没有可参考的长度。
典型现象：页面刚跳转时元素贴顶，等数据加载完或窗口 resize 后才“啪”一下居中。这不是动画延迟，是父容器高度从 0 到撑开的过程。
- 确保包裹内容的父容器有明确高度来源：用
height: 100vh（慎用于有头部/底部的布局），或min-height: 100vh+ 内容自然撑高 - 避免在路由组件里直接对
body或html设display: flex—— 它可能被框架样式覆盖，且影响全局 - 若用 CSS-in-JS 或 scoped style，确认样式作用域没被路由组件卸载/重建打断（Vue 的
<style scoped>在组件销毁时会移除对应规则）
keep-alive 缓存下居中样式“闪动”？子元素宽高未稳定就渲染
Vue 的 <keep-alive> 或 React 的 React.memo 能保留组件实例，但不能锁住 DOM 尺寸变化。表格、图片列表这类依赖异步资源的组件，路由复用后可能先以空数据渲染，再触发重排——align-items: center 会随父容器高度跳变而反复计算。
例如：<img> 没设 width/height 属性，加载前高度为 0，加载后突然撑开，导致居中位置偏移。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给图片/视频等异步尺寸元素预设
aspect-ratio（Chrome 103+）或min-height占位 - 避免在
mounted/useEffect里立即调用element.focus()或滚动操作，它们可能抢在样式计算完成前执行 - 必要时用
requestAnimationFrame(() => { /* 读取 offsetHeight 再操作 */ })延迟到下一帧
hash 路由切换后绝对定位居中偏移？定位上下文被意外重置
用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 的方案，在 SPA 中容易出问题：不是样式写错了，而是定位参考系变了。
典型错误：把居中元素直接塞进 <router-view>，而该区域在每次路由切换时被 innerHTML = '' 清空再重写——父容器的 position: relative 样式可能丢失或未及时重申。
- 确保定位上下文（即设了
position: relative的父容器）是稳定的、不随路由销毁重建的节点，比如固定在<body>下的<div id="overlay-root"> - 不要把
position: relative写在路由组件的根元素上；它可能被v-if或条件渲染移除 - 如果必须动态插入，插入后手动触发一次
getComputedStyle(parent).position确保浏览器已应用该样式，再设置子元素
屏幕阅读器用户路由跳转后焦点丢失？main 标签内居中逻辑干扰语义流
视觉上的居中和无障碍焦点流是两回事。即使元素在视觉上完美居中，若 <main> 内容被整块替换（如 innerHTML = newHTML），屏幕阅读器会丢失当前上下文，且不会自动聚焦到新内容起点。
更麻烦的是：某些居中方案（比如用 transform: translateY(-50%) 把内容往上拉）会让元素在 DOM 顺序上“提前”，但视觉位置靠后，破坏阅读顺序。
- 始终让
<main>元素稳定存在，只更新其内部 HTML，不要替换整个<main>标签 - 路由切换后，主动调用
mainElement.focus({ preventScroll: true })（需设tabindex="-1"），告诉屏幕阅读器“主内容已更新” - 避免用
transform或负margin做居中——它们不改变文档流顺序，但会让辅助技术误判视觉层级
真正难处理的不是“怎么写居中”，而是“什么时候 DOM 尺寸稳定、语义上下文连续、样式作用域不中断”。这三个条件在 SPA 路由切换中常常错位，得一个一个对齐。
