404页面居中布局必须基于真实404状态码，服务器需返回http/1.1 404 not found；推荐flex方案（body设min-height: 100vh + display: flex），兼顾语义、兼容性与seo；ie8–11可用text-align + line-height后备；grid方案简洁但需注意托管平台兼容性。
404页面的居中布局必须基于真实404状态码
光靠CSS做不到“真正”的404居中——如果服务器返回的是200 OK，哪怕页面内容再居中，搜索引擎也会把它当普通页面收录，用户也得不到错误语义反馈。先确认服务器配置：ErrorDocument 404 /404.html（Apache）、error_page 404 /404.html（Nginx），且确保该响应携带HTTP/1.1 404 Not Found状态头。本地双击打开404.html无效，必须用npx serve或类似本地服务预览。
用Flex实现垂直+水平居中（现代标准方案）
对<main></main>容器启用display: flex是最直接、语义清晰的方式。不需要额外包裹层，也不依赖固定宽高。
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
}
<p>main {
text-align: center;
padding: 2rem;
}</p>
-
min-height: 100vh确保容器撑满视口，避免内容被截断 - 不要写
height: 100vh或height: 00vh——前者在滚动长页时会遮盖底部内容，后者等于0vh，直接让容器高度为0 -
flex-direction: column配合text-align: center能让内部文字、按钮自然居中，无需单独设margin: auto
兼容IE8–IE11的后备方案（仅需一行）
如果项目仍需支持IE，text-align: center + line-height组合比table-cell更轻量，且不破坏语义结构。
body {
margin: 0;
min-height: 100vh;
text-align: center;
line-height: 100vh; /* 高度匹配视口 */
}
<p>main {
display: inline-block;
vertical-align: middle;
line-height: normal; /<em> 重置子元素行高 </em>/
max-width: 600px;
}</p>
-
line-height: 100vh把body变成一个“单行文本框”，inline-block的main就能靠vertical-align: middle垂直居中 - 必须重置
main的line-height，否则内部段落会继承100vh导致文字间距爆炸 - 这个方案在IE8+稳定，但不适用于内容高度超过视口的场景（比如带长说明文案的404页）
Grid方案慎用：不是所有托管平台都支持
display: grid写法最简洁：place-items: center一行搞定，但实际部署时容易踩坑。
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
}
- GitHub Pages、Vercel、Cloudflare Pages 默认支持
grid，但部分老旧CDN或企业内网代理会剥离display: grid声明 - 若需降级，可叠加
display: flex声明（现代浏览器优先用grid，旧环境回退到flex） - 避免用
grid-template-rows: 1fr等复杂定义——404页不需要网格分区，过度设计反而增加调试成本
真正关键的不是“怎么居中”，而是确保<h1>404 Not Found</h1>在DOM中真实存在、未被JS动态插入、未用图片替代，且<main></main>包裹全部正文内容——屏幕阅读器和SEO都依赖这个结构，视觉居中只是结果，不是前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
