text-align: center只对父容器内的行内内容（如文字、img、span）生效，必须作用于父元素；若子元素为块级、脱离文档流或父容器无明确宽度，则无效。
text-align: center 只对行内内容生效
给父容器加 text-align: center，不是为了让它自己居中，而是让它内部的行内级内容（比如文字、<img>、<span>）水平对齐到中间。新手常犯的错是把一个 <div> 直接塞进带 text-align: center 的父容器里，结果没反应——因为 <div> 默认是块级，不受这个控制。
适用场景：商品标题文字、参数表格里的图标、一行多个 <button> 按钮并排居中。
- 必须作用于父容器，子元素本身不写该样式
- 子元素若设了
float或position: absolute，text-align就失效 -
display: flex或display: grid父容器会忽略text-align
margin: 0 auto 要求块级 + 定宽 + 不脱离文档流
这是让单个块级元素（如商品主图容器、参数卡片）在固定宽度父容器内水平居中的最稳方案。但它不是“随便加就有效”，三个条件缺一不可：元素得是块级（display: block）、有明确 width（不能是 100% 或 auto）、没用 float 或 position: absolute。
常见失效现象：<div class="card"> 写了 margin: 0 auto 却靠左贴边——大概率是漏了 width，或父容器用了 display: flex。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
width: 320px或max-width: 80%配margin: 0 auto -
<img>默认是行内元素，想用margin: 0 auto必须先加display: block - 父容器是
flex或grid时，margin: auto会被覆盖，直接无效
flex 布局的 justify-content: center 改变父容器行为
只要父容器设 display: flex 和 justify-content: center，所有直系子元素立刻水平居中，不管它是 <div>、<img> 还是 <button>。但它不是“无代价”的居中——父容器从此变成 Flex 容器，子元素自动成为 Flex 项目，传统布局行为会变。
典型副作用：子元素的 float 失效、vertical-align 不再起作用、margin 的某些组合被重定义。
- 适合响应式场景，子元素宽高未知也 OK
- 如果子元素本身
width: 100%，它仍会撑满父容器，justify-content对它无效 - IE10–11 对
justify-content支持有 bug，老项目慎用
absolute + transform: translateX(-50%) 专治脱离文档流
当元素已经用了 position: absolute（比如弹窗、加载提示），又必须在固定区域内水平居中时，left: 50% 加 transform: translateX(-50%) 是目前最可靠的方式。它不依赖具体像素值，也不改变文档流。
关键点在于定位上下文：父容器必须设 position: relative（或其他非 static 值），否则 left: 50% 会相对于整个视口计算，滚动时就偏了。
- 只写
left: 50%会导致元素左边缘在中心，右边一半跑出区域 -
transform的百分比是相对于元素自身宽高，所以translateX(-50%)总是向左挪一半宽度 - 旧版 Safari 对
transform支持需前缀，will-change: transform场景下性能略低
