全屏海报必须设height: 100vh而非100%，因html/body默认无高度且带margin，需显式设height: 100%; margin: 0;否则place-items或flex垂直居中失效；图片应配max-width: 100%; height: auto;保比例，或object-fit: cover配合显式宽高防变形。
全屏海报必须设 height: 100vh，否则 place-items 或 flex 都会失效
很多人在写 display: grid; place-items: center; 后发现图片还是贴顶，根本原因就是父容器没高度。浏览器默认的 html 和 body 有 margin，且高度不继承，所以必须显式声明：
html, body { height: 100%; margin: 0; }- 海报容器加
height: 100vh;（不是100%） - 如果海报是整页唯一内容，直接用
body作容器也行，但要先清 margin
漏掉任一条件，place-items: center 就只水平居中、垂直无效——它不是“把元素推到屏幕中间”，而是“在父容器网格格子内居中”，没格子高度，就塌缩。
图片尺寸不固定时，max-width: 100% + height: auto 是安全底线
全屏海报常配大图，但用户设备宽高比千差万别。直接写 width: 100%; height: 100%; 会拉伸变形；只写 width: 100%; 又可能溢出或留白。稳妥做法是：
-
max-width: 100%; height: auto;→ 保持原始宽高比，宽度撑满，高度自适应 - 若需“覆盖全屏不露底”，改用
object-fit: cover;+ 显式宽高（如width: 100vw; height: 100vh;） - 避免对
img自身设margin: 0 auto;——它只在块级+有宽度时生效，和全屏场景冲突
IE11 或老 WebView 必须用 position: absolute + transform
如果你的项目仍需兼容 IE11、Android 4.4 WebView 等环境，place-items 和 flex 的 align-items: center 不可用。此时必须退回到定位方案：
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
body）加position: relative; - 海报元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 关键陷阱：
transform: translate(-50px, -50px)是错的——必须是百分比，否则无法响应式 - 该方案不依赖父容器高度计算，但会脱离文档流，后续内容需手动处理占位
响应式断点下，vertical-align: middle 伪元素法已过时
网上还能搜到用 :after 伪元素 + vertical-align: middle 实现居中的老方案，它依赖行内布局模拟高度，代码冗长且在 flex/grid 主导的今天毫无必要。除非你被卡在无法改结构的遗留系统里，否则别碰它——place-items: center 一行顶它二十行，还少三个 bug。
真正容易被忽略的是：全屏海报的“自适应”不只是尺寸缩放，还包括视口变化时的重排。所有方案都要求父容器高度实时响应，而 100vh 在 iOS Safari 横屏切换时可能失准，这时得监听 resize 事件手动重设高度——这点连不少框架封装都没兜住。
