答案：推荐使用Flexbox或Grid实现图片居中。Flexbox通过display: flex、justify-content和align-items实现水平垂直居中；Grid通过display: grid和place-items: center一键居中，两者均响应式友好，兼容性好，适用于现代布局。
在HTML5中让img居中，现代布局推荐使用 Flexbox 或 Grid，它们能更灵活、高效地实现图片居中，包括水平、垂直或完全居中。
使用 Flexbox 实现图片居中
Flexbox 是最常用的居中方案之一，适合容器内单个或多个子元素的对齐。
实现方式：
- 给父容器设置
display: flex - 使用
justify-content: center水平居中 - 使用
align-items: center垂直居中
立即学习“前端免费学习笔记（深入）”；
@@##@@
使用 CSS Grid 实现图片居中
CSS Grid 同样强大，适用于复杂布局，但居中一个图片也非常简洁。
实现方式：
- 父容器设置
display: grid - 使用
place-items: center一键居中（等同于水平+垂直居中）
立即学习“前端免费学习笔记（深入）”；
@@##@@
适用场景建议
两种方法都现代且兼容性良好（主流浏览器均支持）。
- 若父容器是弹性布局的一部分，优先用 Flexbox
- 若整体页面使用网格布局，或想简化代码，用 Grid + place-items 更直观
- 两者都不依赖图片尺寸，响应式友好
基本上就这些。选择 Flex 或 Grid 取决于你的整体布局需求，都能轻松实现 img 居中。
