404页面垂直水平居中用flex最稳，需设父容器min-height:100vh并重置内外边距；CSS变量用于主题色、字体等便于维护；关键样式应内联防FOUC；响应式仅需手机/桌面两断点；须更新title和meta描述。
404页面怎么让内容真正垂直水平居中
用 flex 最稳，但别只写 display: flex 就完事。父容器必须设高度（比如 min-height: 100vh），否则子元素没参照，align-items 和 justify-content 不生效。
常见错误是直接给 body 加 flex，结果被浏览器默认 margin 或用户自定义样式干扰；更可靠的做法是包一层 .page-404 容器，并重置其内外边距。
html, body { height: 100%; margin: 0; }.page-404 { min-height: 100vh; display: flex; align-items: center; justify-content: center; }- 文字区域用
text-align: center配合max-width: 600px控制可读性，避免长行阅读疲劳
CSS变量怎么用在404页配色和字体上
把主题色、字号、间距抽成 :root 变量，不是为了“高大上”，而是方便后续改版或适配暗色模式。比如 --color-primary: #2563eb 用在标题和返回按钮上，一处改，全局动。
注意：不要在 @media (prefers-color-scheme: dark) 里重复定义所有变量，只覆盖需要变的部分——比如 --color-bg: #0f172a 和 --color-text: #e2e8f0，其余沿用亮色模式的值即可。
立即学习“前端免费学习笔记（深入）”；
- 字体栈建议写成
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif，兼顾性能与还原度 - 避免用
rem做绝对尺寸（如图标宽高），小屏下容易过小；404页的主图标用em或视口单位更稳妥 - 慎用
font-weight: 900等极粗字重，部分系统字体不支持，会 fallback 到普通粗细，视觉失衡
为什么404页加载慢？检查这些CSS加载方式
404页本身 HTML 很轻，但慢往往出在 CSS 加载策略上。内联关键样式（critical CSS）是底线——至少把居中布局、字体、颜色相关规则塞进 <style></style> 标签，避免 FOUC（内容闪动）或白屏。
如果用了外部 CSS 文件，确认它没带 @import，也没依赖其他网络请求；更别提在 <link rel="stylesheet"> 上加 media="print" 却忘了改回来这种低级失误。
- 用
curl -I查看 CSS 文件 HTTP 状态码，404 页面自己引用的 CSS 返回 404 就真成套娃了 - 避免在 CSS 里用
url()引用未部署的字体或图片，本地开发看着好，上线就断 - 如果项目用构建工具，确保 404.html 被正确复制到输出目录，且路径没被哈希化（比如别让它变成
404.abc123.html）
响应式断点怎么设才不踩坑
404页不需要复杂断点，两个就够了：手机（max-width: 640px）和桌面。别学 PC 端搞七八个 media query，反而增加维护成本和测试负担。
重点不是“适配多少设备”，而是“文字是否可读、按钮是否可点、留白是否压抑”。小屏下把 padding 从 4rem 收到 2rem，标题 font-size 从 4rem 降到 2.5rem，这就够了。
- 用
clamp(1.5rem, 4vw, 2.5rem)替代固定字号，比纯vw更可控 - 避免在媒体查询里改
flex-direction（比如从 column 改 row），404页结构简单，没必要 - 测试时关掉 Chrome DevTools 的 device toolbar，直接缩放窗口——很多 bug 只在连续缩放时暴露
最常被忽略的是：404页面的 <title></title> 和 meta description 没更新，搜索引擎抓到的还是“Page Not Found | MySite”，既不利于 SEO，也不利于用户理解当前所处状态。
