广告真正在屏幕正中央需同时水平垂直居中，最简方案是display: grid + place-items: center配height: 100vh，父容器须独立包裹、非body直接设置，现代浏览器兼容良好；老浏览器可用position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)。
广告要真正在屏幕正中央（水平+垂直），不能只靠 text-align: center 或 margin: 0 auto —— 这俩连垂直居中都做不到，只会让广告卡在顶部中间。
用 display: grid + place-items: center 最省事
这是目前最干净、最不易出错的方案，尤其适合 banner、弹窗类广告。它不依赖广告尺寸，也不要求你写 JS 计算偏移。
- 父容器必须设
height: 100vh（否则“垂直”无参照，广告会塌到顶部） - 父容器不能是
body直接加样式——body默认有 margin，且可能被用户样式干扰，建议套一层<div id="ad-container"> -
place-items: center等价于同时写justify-content: center和align-items: center，但更简短 - IE 不支持，Chrome/Firefox/Safari/Edge（2022 年后版本）全兼容
<div id="ad-container" style="display: grid; place-items: center; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;"> <div class="ad-banner">广告内容</div> </div>
用 position: absolute + transform: translate(-50%, -50%) 兼容老浏览器
如果你的广告要跑在 IE10 或某些定制 WebView 里，这个组合仍是事实标准。但它对定位上下文敏感，漏一个属性就偏。
- 父容器必须设
position: relative或position: fixed；如果直接挂在body上，得确保body的position不是static - 子元素必须同时写
top: 50%、left: 50%和transform: translate(-50%, -50%)；只写前两个，广告左上角会落在中心点 -
z-index要足够高，否则可能被其他层盖住 - 滚动时不会位移——因为用了
position: fixed，不是absolute
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="ad.jpg" alt="banner">
</div>
</div>
别把 flex 直接加在 <body> 上
有人试过给 body 加 display: flex，结果整个页面布局崩了——所有直系子元素（比如多个 <p>、<header>）都变成 flex item，顺序、换行、对齐全乱。
立即学习“前端免费学习笔记（深入）”；
- 广告容器必须是独立的包裹层，不要污染全局布局上下文
- 如果广告需要响应式缩放，
flex容器内子元素的max-width: 100%仍有效，但margin: auto在 flex 里会被忽略 - 避免在广告容器上同时写
flex-direction: column，否则justify-content: center会控制垂直方向，和预期相反
真正难的不是写哪一行 CSS，而是判断广告是否该脱离文档流。固定位置的 banner 必须用 fixed，而嵌入正文流的推荐位就得用 grid 或 flex 配合明确高度——否则一滚动，用户根本看不到它在哪。
