flex布局居中图片最稳，但需父容器设display: flex及明确高度；grid place-items:center简洁但兼容性有限；margin: 0 auto需配合width/max-width；text-align: center仅对行内元素有效。
flex布局居中图片最稳，但别忘了父容器要设高度
现代项目里，display: flex 是响应式图片居中的首选，它天然支持宽高未知、内容动态变化的场景。关键不是给 img 加样式，而是控制它的父容器：
- 父容器必须设
display: flex，否则justify-content和align-items无效 - 若图片需在固定高容器内垂直居中（比如轮播图项），父容器得有明确高度或
min-height；否则align-items: center可能“没地方可居中” - 避免嵌套多层 flex：如果图片本身是块级且只求水平居中，
text-align: center更轻量
示例：
.hero-img-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px; /* 必须，否则垂直方向无参考 */
}
grid place-items:center 简洁但兼容性有断点
place-items: center 是 grid 的语法糖，一行顶 flex 两行，写起来爽，但要注意浏览器支持边界：
- Chrome 57+/Firefox 52+/Safari 10.1+ 支持，IE 完全不支持
- 它等价于
justify-items: center; align-items: center，只对直接子元素生效 - 如果父容器已有
grid-template-areas或复杂列定义，place-items可能被覆盖或行为异常
适合新项目、管理后台等无需兼容 IE 的场景。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
margin: 0 auto 要配 width 或 max-width 才生效
这个老办法依然可靠，但新手常栽在“忘了设宽”上：
-
img必须是块级，所以得先加display: block - 只设
margin: 0 auto不够——浏览器需要知道“往哪中间挤”，所以必须配合width（如width: 80%）或max-width（如max-width: 600px） - 它只管水平，垂直方向还得靠父容器
padding或line-height配合
响应式下推荐用 max-width: 100% + height: auto 防止溢出，再加 margin: 0 auto。
text-align: center 仅对行内内容有效，别乱用在 div 上
这是最常被误用的方案。它看起来简单，但逻辑很窄：
- 只作用于父容器内的行内级内容（
img、span、文字等），对子div、section这类块级元素完全无效 - 它不改变子元素的盒模型，所以不能实现“容器内绝对垂直居中”，只能靠行高或 padding 模拟
- 如果图片外层套了
a标签，默认仍是行内，text-align: center依然管用；但一旦给a加了display: block，就得换方案
真正省事的场景只有一个：你只要让图片在一段文字流里水平居中，且不关心垂直位置。
响应式图片居中真正的难点不在“怎么写”，而在“怎么选”——flex 和 grid 解决的是布局意图，而 margin: 0 auto 和 text-align 解决的是显示行为。选错前提，代码写得再熟也没用。
