全屏启动页用flexbox居中需同时满足：父容器设height:100%、justify-content和align-items均设为center、避免position:fixed或vh单位干扰。
全屏启动页用 Flexbox 实现居中，关键不是“加了 display: flex 就完事”，而是三个条件必须同时满足：父容器有明确高度、两个对齐属性都设、且不能被 position: fixed 或视口单位缺陷干扰。
为什么只写 justify-content: center 不行
Flex 的 justify-content 控制主轴（默认水平），align-items 控制交叉轴（默认垂直）。漏掉 align-items: center，元素只会水平居中，垂直方向仍按默认流式布局——也就是贴在顶部。常见现象是 logo 水平居中但离顶部只有几像素，看着像没动。
- 必须同时声明：
justify-content: center和align-items: center - 这两个属性必须写在同一个 flex 容器上，不能一个写在
body、一个写在子容器 - 如果容器里有多个子元素，它们会一起被居中；若只想居中某一个，用
margin: auto更直接
html 和 body 高度设为 100% 是硬性前提
Flex 容器要能垂直居中子元素，自身得有高度。而 body 默认高度由内容撑开，不是视口高。不设 height: 100%，容器高度为 0，align-items: center 就没作用对象。
- 必须写：
html, body { height: 100%; margin: 0; } - 只设
body { height: 100%; }不够，因为html是body的父级，它没高度，body的百分比高度就无效 - 别用
min-height: 100vh替代，vh在 iOS Safari 地址栏收起/展开时会跳变，导致启动页突然偏移
启动页容器该用 height: 100vh 还是 min-height: 100vh
用 min-height: 100vh 更稳妥。它既能保证初始满屏，又不会因内容超长而截断——比如加载失败后显示错误提示，文字多了一行，height: 100vh 会让底部被切掉。
- 推荐写法：
.splash { min-height: 100vh; display: flex; justify-content: center; align-items: center; } - 如果启动页含
position: fixed元素（如旋转 loading 图标），它已脱离 flex 流，需单独定位，不能指望它被align-items影响 - 避免在启动页里用
font-size: 4vh这类视口单位字体，iOS 缩放后文字渲染模糊或错位
为什么启动页内容会闪一下才居中
这是 DOM 渲染顺序问题：HTML 解析完立刻按默认文档流渲染一次（此时还没应用 CSS），等样式表加载并解析后，浏览器重排为 flex 居中——两次渲染之间就有视觉闪动。
- 最简解法：给启动页容器加
opacity: 0，监听DOMContentLoaded后加 class 切换为opacity: 1，配合 CSS transition 做淡入 - 更彻底的方案：外联 CSS 加
media="print"，JS 加载完再改media="all"，确保样式就绪后再渲染内容 - 别依赖
body { display: flex }本身做延迟，flex 布局本身不解决渲染时机问题
真正容易被忽略的是 iOS Safari 对 vh 的动态修正——它不是 bug，是浏览器主动适配地址栏高度变化的行为。想绕过它，就得放弃 vh，改用 height: 100% + 父级高度约束，或者用 JS 监听 resize 事件手动同步高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
