最轻量兼容方案是margin: auto配合display: block实现水平居中，但无法垂直居中；flexbox一行代码justify-content:center和align-items:center可完全居中且不依赖宽高；position+transform适合绝对定位场景；text-align仅控制行内水平对齐，无法垂直居中。
用 margin: auto 配合 display: block 实现水平垂直居中
这是最轻量、兼容性最好的方案，适用于已知宽高的
-
inline元素，margin: auto对它无效 - 必须加
display: block，再设margin: auto才能触发水平居中 - 若容器有固定高度，还需配合
line-height或flex实现垂直居中；但仅靠margin: auto无法垂直居中 - 示例：
.container { width: 300px; height: 200px; border: 1px solid #ccc; } .container img { display: block; margin: auto; max-width: 100%; }此时图片水平居中，但顶部对齐——要垂直居中得换方法
用 flexbox 一行代码搞定完全居中
现代项目首选。只要容器设为 display: flex，子元素（包括
-
justify-content: center控制主轴（默认水平）居中 -
align-items: center控制交叉轴（默认垂直）居中 - 无需设置
img的display或margin，哪怕图片是响应式（max-width: 100%）也照样居中 - 注意：父容器必须有明确高度（比如
height: 200px或min-height），否则align-items: center可能失效 - 示例：
.container { display: flex; justify-content: center; align-items: center; height: 200px; }
用 position: absolute + transform 精确锚点居中
适合需要绝对定位的场景（比如图层叠加、模态框内图像），或容器本身是相对定位的布局块。
- 容器需设
position: relative，图片设position: absolute - 四个方向都设
0，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 比老式 “
left: 50%; top: 50%; margin-left: -xxxpx” 更可靠，无需预知图片尺寸 - 容易踩的坑：
transform的基准是元素自身左上角，不是中心点；如果忘了设left: 50%; top: 50%，translate就没意义 - 示例：
.container { position: relative; height: 200px; } .container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
为什么 text-align: center 只能水平居中？
很多人试过给容器加 text-align: center，发现图片只水平居中、不垂直居中——这不是 bug，是 css 行内布局的本质限制。
立即学习“前端免费学习笔记（深入）”；
-
text-align只影响行内内容（包括inline图片）的**行内对齐**，不影响行高或块级布局 - 垂直方向没有对应的
vertical-align全局控制；它只在行内上下文生效，且作用对象是“行框内的基线”，不是容器高度 - 想靠
vertical-align: middle垂直居中？必须搭配line-height等高，或把图片放进table-cell，但这些方案现在基本被flex取代 - 一句话：别指望
text-align解决垂直问题，它连容器高度都不感知
实际项目里，flexbox 是最省心的选择；但如果要兼容 IE10 以下，就得退回 position + transform 方案。最容易被忽略的是容器高度——无论用哪种方法，**没有高度就没有垂直居中的参照系**，这点比写法本身更关键。