新手做商品详情页居中需分场景：标题图片用text-align:center（作用于父容器内行内元素），块级卡片用margin:0 auto（需明确宽度且非flex/grid父容器），整块区域垂直水平居中用flex+height，弹窗用absolute+transform(-50%,-50%)。
直接说结论：新手做商品详情页，别一上来就堆居中代码，先分清“谁要居中”和“在哪儿居中”，否则margin: 0 auto写了也不生效，text-align: center加错地方反而让按钮跑偏。
text-align: center 只对父容器里的文字和图片起作用
这是新手最常踩的坑——给商品标题的 <div> 自己加 text-align: center，结果没反应。因为 text-align 控制的是**子元素中的行内内容**，不是它自己。
- 正确用法：把标题、价格、参数表这些都包在一个父容器里，给这个父容器加
text-align: center - 适用对象：文本、
<img>、<span>、<a>这类默认 inline 的元素 - 不适用对象：单独的
<div>、<section>、<button>（除非你把它设成display: inline-block） - 示例：
<div style="text-align: center"><h1>iPhone 15 Pro</h1><img src="pic.jpg"></div>—— 这样标题和图片才真居中
margin: 0 auto 要求块级元素必须有明确 width
想让商品主图容器或参数卡片水平居中？margin: 0 auto 是最稳的老办法，但缺一不可：元素得是块级 + 有宽度 + 没脱离文档流。
- 常见失效场景：
<div class="product-img">没写width，或者写了width: 100%（没剩余空间可分） - 安全写法：
width: 320px或max-width: 90%，再配margin: 0 auto - 注意父容器不能是
display: flex或display: grid，否则auto会被覆盖 - 垂直方向无效——别指望它能把整个详情页撑到屏幕中间
Flexbox 居中适合整块区域，但父容器必须有高度
想让“主图+标题+价格”这一整块在视口里垂直水平居中？用 display: flex 最省心，但新手常漏掉关键一步：父容器没高度，align-items: center 就白写。
立即学习“前端免费学习笔记（深入）”；
- 必须设置父容器高度，比如
height: 100vh或min-height: 100vh - 子元素不用设宽高也能居中，
justify-content: center控水平，align-items: center控垂直 - 别在子元素上同时写
margin: auto，会和 flex 的对齐逻辑冲突 - 示例结构：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh"><div class="product-card">...</div></div>
绝对定位 + transform(-50%,-50%) 适合模态框，不适合正文流
弹窗、加载提示这类脱离正常文档流的元素，用 position: absolute 配合 transform: translate(-50%, -50%) 精确居中很可靠；但把它套在商品主图或参数表上，反而会让布局失控。
- 前提：父容器必须设
position: relative，否则top: 50%会相对整个页面计算 - 子元素要写
position: absolute; top: 50%; left: 50%，再加transform: translate(-50%, -50%) - 副作用明显：该元素完全脱离文档流，后续内容会“塌陷”上去，需要额外处理
- 移动端滚动时若父容器没设
position: relative，一滑动就偏移
真正容易被忽略的点是：商品详情页的“居中”从来不是全局统一操作。标题行用 text-align，卡片用 margin: 0 auto，弹窗用 transform，三者混用才自然。硬套一个方案，反而哪哪都不对劲。
