display: grid + place-items: center 是最简解法，需作用于父容器并设 height: 100vh，同时清除 html, body { margin: 0; height: 100%; }，现代浏览器全支持，IE 不兼容。
display: grid + place-items: center 是最简解法
现代项目直接用这个组合，一行 CSS 就能搞定水平+垂直居中，不依赖子元素尺寸，也不用算宽高。
关键点是：必须作用在商品展示区的**父容器**上，且该父容器要撑满视口高度。
-
height: 100vh必须加在父容器上，否则place-items: center在垂直方向没参照，子元素会贴顶 -
html和body默认有margin，得先清掉：html, body { margin: 0; height: 100%; } - 兼容性没问题——Chrome/Firefox/Safari/Edge（2022 年起）全支持，但 IE 完全不认
示例：
<div style="display: grid; place-items: center; height: 100vh;"> <section class="product-grid">...</section> </div>
Flex 布局适合需要兼容老 Safari 的场景
如果你的项目还得跑在 Safari 14 或更早版本上，display: flex 加 justify-content 和 align-items 更稳妥。
立即学习“前端免费学习笔记（深入）”；
它和 Grid 的逻辑类似，但需要手动加 -webkit- 前缀才能覆盖旧 Safari。
- 父容器设
display: -webkit-flex; display: flex; - 必须显式设置父容器高度（如
height: 100vh），否则align-items: center不生效 - 别直接在
body上写display: flex——它会把所有直系子元素变成 flex item，可能意外破坏页脚、导航等布局
示例：
<main style="display: -webkit-flex; display: flex; justify-content: center; align-items: center; height: 100vh;"> <div class="product-list">...</div> </main>
position: absolute + transform 用于模态层或固定尺寸弹窗
当商品展示区是遮罩层、悬浮卡片这类脱离文档流的元素时，这个组合最可控。
它不依赖父容器是否 flex/grid，也不怕滚动条干扰，但前提是父容器得有定位上下文。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于整个视口计算 - 子元素要设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -
transform是核心——它基于自身宽高计算偏移，哪怕宽高是auto或由内容撑开也能对齐
常见翻车点：transform: translate(-50%, -50%) 漏写括号、写成 translateX/Y、或忘了配 top/left。
别用 text-align: center 或 margin: 0 auto 直接套商品区
这两个方法只管水平方向，强行用在商品展示区上，结果一定是“顶部居中”，不是屏幕正中央。
text-align: center 只影响行内内容（比如文字、图片），对 div 这类块级容器无效；margin: 0 auto 要求明确宽度，且完全不管垂直方向。
- 错误写法：
<div style="text-align: center;"><section class="products"></section></div>→ 商品区卡在顶部中间 - 更隐蔽的坑：如果商品区用了
display: grid或flex，父容器再设margin: 0 auto会被忽略 - 真要用
margin: 0 auto，只能作用在商品区内部某个定宽卡片上，而不是整个展示区
真正容易被忽略的是：居中永远是个相对操作——你得确认“相对于谁居中”，然后确保那个“谁”有明确的尺寸和定位上下文。写错一层，整个就偏了。
