新手做商品详情页居中需分场景：标题图片用text-align:center（作用于父容器内行内元素），块级卡片用margin:0 auto（需明确宽度且非flex/grid父容器），整块区域垂直水平居中用flex+height，弹窗用absolute+transform(-50%,-50%)。

直接说结论：新手做商品详情页，别一上来就堆居中代码，先分清“谁要居中”和“在哪儿居中”，否则margin: 0 auto写了也不生效，text-align: center加错地方反而让按钮跑偏。

text-align: center 只对父容器里的文字和图片起作用

这是新手最常踩的坑——给商品标题的 <div> 自己加 <code>text-align: center，结果没反应。因为 text-align 控制的是**子元素中的行内内容**，不是它自己。

• 正确用法：把标题、价格、参数表这些都包在一个父容器里，给这个父容器加 text-align: center
• 适用对象：文本、<img>、<span></span>、<a></a> 这类默认 inline 的元素
• 不适用对象：单独的 <div>、<code><section></section>、<button></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"> 没写 <code>width，或者写了 width: 100%（没剩余空间可分）
• 安全写法：width: 320px 或 max-width: 90%，再配 margin: 0 auto
• 注意父容器不能是 display: flex 或 display: grid，否则 auto 会被覆盖
• 垂直方向无效——别指望它能把整个详情页撑到屏幕中间

Flexbox 居中适合整块区域，但父容器必须有高度

想让“主图+标题+价格”这一整块在视口里垂直水平居中？用 display: flex 最省心，但新手常漏掉关键一步：父容器没高度，align-items: center 就白写。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 必须设置父容器高度，比如 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，三者混用才自然。硬套一个方案，反而哪哪都不对劲。