Flex容器设为100vh后文字不居中，需同时设置display: flex、justify-content: center和align-items: center，并重置html与body的margin、padding及height；移动端优先用100dvh替代100vh以避免地址栏影响。
flex容器设为100vh后文字不居中？检查display和justify-content
很多情况是写了height: 100vh但没配display: flex，或者漏了justify-content: center和align-items: center。Flex居中必须两个属性同时生效，缺一不可。
-
display: flex是前提，没有它，justify-content和align-items完全无效 -
justify-content: center控制主轴（默认水平）居中 -
align-items: center控制交叉轴（默认垂直）居中 - 如果容器内有多个子元素，只加这两个属性就能整体居中；单个文字也一样
文字被截断或偏上？注意body和html的默认margin和padding
浏览器默认给body加了8px外边距，html也可能有滚动条宽度干扰，导致实际可用高度略小于100vh。文字看着“偏上”或底部露白，往往不是flex问题，而是父容器没清空边距。
- 必须重置：
html, body { margin: 0; padding: 0; height: 100%; } -
body要设height: 100%，否则子元素的100vh可能失效（尤其在嵌套布局里） - 如果页面有固定header/footer，别用
100vh，改用100dvh（更可靠，避开地址栏缩放影响）
移动端适配出问题？优先用100dvh替代100vh
100vh在iOS Safari和部分Android浏览器里会把地址栏高度算进去，滚动时视口高度突变，文字“跳动”。这不是bug，是规范行为；100dvh才是动态视口真实高度。
- 支持情况：Chrome 105+、Firefox 106+、Safari 16.4+，旧版本需降级回
100vh并加JS监听resize兜底 - 写法直接替换：
height: 100dvh，无需其他改动 - 不要用
min-height: 100vh假装兼容——它会导致内容超出时无法滚动，文字被切掉
文字模糊或渲染异常？避免transform translateY负值居中
有人用position: absolute + transform: translateY(-50%)模拟居中，但文字在Retina屏或缩放时容易发虚。Flex方案本身无此问题，但若混用transform，会触发亚像素渲染。
立即学习“前端免费学习笔记（深入）”；
- 纯Flex居中不需要
transform，删掉所有translateY、translateX相关代码 - 如果必须用绝对定位（比如兼容IE），改用
top: 50%; left: 50%; transform: translate(-50%, -50%)，且确保父容器position: relative - 字体抗锯齿受
will-change或backface-visibility影响，非必要不加
最常被忽略的是html和body的高度链，以及dvh和vh的适用场景差异。写完记得在真机上滑动测试，别只看桌面DevTools模拟器。
