手机端CSS空状态页面如何实现居中显示及图标自适应缩放？

本文共计894个文字，预计阅读时间需要4分钟。

手机端状态不居中，布局方式不是justify-content: center，而是父容器根本没写高度可居中。常见现象是图标和文字堆在顶部，或整个状态区域拥挤成一条线。

• min-height: 100vh 必须加在最外层容器上，仅用 height: 100vh 在 iOS Safari 下可能失效（滚动时触发重绘，高度归零）
• 确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在且未被覆盖；缺它会导致 vh 单位按桌面视口计算
• 避免给 flex 容器设 overflow: hidden 或 position: fixed，它们会切断 flex 对齐上下文

图标在 iPhone 上显示过大或模糊？优先用 inline SVG + rem 控制尺寸

用 <img src="icon.png"> 在高 DPR 设备（如 iPhone）上容易糊，而单纯设 width: 24px 又会在小屏上撑满屏幕。SVG 内联+相对单位是最稳的解法。