HTML/CSS居中无银弹，需据元素类型、容器、兼容性选择：行内元素用text-align:center；现代项目首选flex（display:flex+justify-content/align-items）；IE9用绝对定位+transform；Grid适合网格布局（place-items:center）。
HTML 和 CSS 里居中对齐不是一道“选一个方法就行”的题，而是得看你要居中的东西是什么、在什么容器里、是否需要响应式或兼容老浏览器——没有银弹，但有清晰的判断路径。
行内元素（如 <span>、<img>）水平居中
最常见也最容易误用的场景：想让文字或图标在父容器里居中，却给子元素加 margin: 0 auto，结果无效。
原因很简单：margin: 0 auto 只对块级、非浮动、非绝对定位的元素生效；而 <span> 默认是 inline 元素，不接受 width/height，也不响应 auto margin。
- 正确做法：给父容器设置
text-align: center - 如果父容器是
<div>，且你只希望其中某几个 inline 元素居中，别动全局text-align，改用包裹一层<div style="text-align:center"> - 注意：这个方法只管水平居中，垂直方向仍受 line-height 或 padding 影响；若要垂直居中，需配合
vertical-align: middle+ 行高对齐（仅适用于单行）或 flex
display: flex 居中所有常见类型（推荐现代项目首选）
只要父容器能用 Flexbox（IE10+ 支持，iOS Safari 7.1+ 无问题），它就是最可控、最少意外的方案。
立即学习“前端免费学习笔记（深入）”；
核心就两行：
parent {
display: flex;
justify-content: center; /* 水平 */
align-items: center; /* 垂直 */
}- 子元素无需设宽高、无需知道自身尺寸，甚至可以是
<img>、<svg>、<button>或多个并排元素 - 如果子元素是块级且希望它自身内容再居中，别重复套 flex——容易嵌套过深，直接在子元素上用
text-align: center或display: grid - 注意
flex的默认flex-direction: row；若子元素是竖排（比如导航菜单），需加flex-direction: column，再用justify-content控制垂直、align-items控制水平
绝对定位 + transform 居中（兼容 IE9，适合模态框等固定尺寸场景）
当你必须支持 IE9，又不想用 table hack 或 JS 计算，这是目前最稳妥的纯 CSS 方案。
适用前提：你知道子元素的宽高（或可设为固定值），且父容器设置了 position: relative。
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- 关键点是
transform：它基于自身尺寸计算偏移，所以不用写死负 margin - 如果子元素宽高不固定（比如文字卡片随内容伸缩），此法失效；此时应换 flex 或 grid
- IE9 支持
transform，但不支持transform: translate(-50%, -50%)中的百分比单位（需降级为translate(-100px, -50px)），实际项目中建议检测或直接弃用 IE9
Grid 布局居中（现代布局新主力，适合复杂网格结构）
如果你的“居中”其实发生在网格区域里（比如首页三栏布局中中间一栏要上下左右居中），Grid 比 Flex 更自然。
最简写法：
parent {
display: grid;
place-items: center; /* 等价于 align-items: center; justify-items: center; */
}-
place-items对单个子元素有效；若父容器有多个子项，想让其中某个居中，用justify-self: center; align-self: center更精准 - Grid 不依赖子元素的 display 类型，
<span>、<div>、<img>都能直接居中 - 注意：Grid 在 Safari 10.1+ 才开始稳定支持；若需兼容 Safari 9 或更早，别用
place-items，改用显式声明grid-template-areas或回退到 flex
真正卡住人的从来不是“哪个方法能居中”，而是没分清“我要居中的到底是谁、它在什么上下文中、哪些约束不能破”。比如把 flex 用在表单控件上，可能被 label 的默认 display 干扰；又比如在 position: fixed 容器里用 text-align，发现根本不起作用——这时候该检查的是定位上下文，而不是反复调 margin。
