推荐用 background-size: contain; + background-position: center; + background-repeat: no-repeat; 保404文字完整可见，深色图配::before半透黑遮罩提对比度；居中须用flex而非text-align；字体用clamp(2rem, 8vw, 6rem)响应式控制。
用 background-image 铺满全屏但不拉伸变形
直接写 background-image: url(...); background-size: cover; 很容易让图案被裁切或中心偏移，尤其在移动端。关键不是“铺满”，而是“可读区域不被遮挡”。404 文字必须始终清晰可见，所以推荐用 background-size: contain; + background-position: center;，再配合 background-repeat: no-repeat;。如果图是深色底+浅字，还要加一层半透黑遮罩（::before 伪元素）保文字对比度。
用 text-align: center 居中但实际失效的常见原因
text-align: center 只对行内内容生效，对块级元素（比如 404 文字块居中的做法是：外层容器设 display: flex; + justify-content: center; + align-items: center;，再把文字包进一个 。若坚持用 text-align，得确保父容器宽度为 100%，且文字容器是 inline 或 inline-block，否则会掉坑里。
字体大小响应式断点不能只靠
vw
font-size: 10vw; 在小屏上可能小到看不清，在大屏上又撑爆容器。更稳妥的是组合写法：font-size: clamp(2rem, 8vw, 6rem);。它保证最小 2rem、最大 6rem，中间随视口线性变化。别忘了给 加 line-height: 1; 防止上下留白挤压视觉重心，再用 letter-spacing: -0.05em; 让数字“404”更紧凑有力。避免背景图抢戏的三个硬约束
背景图加载慢、字体渲染抖动、flex 居中在旧版 Safari 里失效——这些细节比布局本身更影响用户第一眼判断。动手前先打开 DevTools 的 Network 面板禁用图片，看看纯色背景下文字是否依然可读。filter: brightness(0.4) contrast(0.8);
background-color 备用色（比如 #f8f9fa），否则白屏几秒会显得页面崩了
