答案：html5中图片居中推荐使用flexbox，结合text-align、margin自动及响应式设置实现多场景适配。
在html5中实现图片居中，看似简单，但要兼顾不同屏幕尺寸和响应式需求，需要结合css合理布局。下面介绍几种常用且实用的图片居中方案，适用于现代网页开发。
1. 使用 text-align 实现水平居中
这是最基础的方法，适用于块级容器中的内联元素（如 img）。
说明：
将图片作为行内元素处理，在父容器上设置 text-align: center 即可实现水平居中。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<div style="text-align: center;"> <img src="example.jpg" alt="示例图片"> </div>
注意：该方法仅实现水平居中，若需垂直居中需配合其他方式。
2. 使用 Flexbox 布局（推荐）
Flex 是目前最灵活、兼容性良好的居中方案，支持水平和垂直双向居中。
优势：
- 代码简洁，语义清晰
- 天然支持响应式布局
- 适配移动端和PC端
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 300px;"> <img src="example.jpg" alt="居中图片"> </div>
其中 justify-content: center 控制水平居中，align-items: center 控制垂直居中。容器高度可根据需要设定或使用视口单位（如 100vh）。
3. 使用 margin 自动外边距（固定宽高场景）
当图片宽度已知或设为固定值时，可通过自动外边距实现水平居中。
示例：
<img src="example.jpg" alt="居中图片" style="display: block; width: 300px; margin: 0 auto;">
关键点：
- 图片必须设置为 display: block
- 使用 margin: 0 auto 让左右外边距自动均分
此方法不涉及父容器样式，适合简单页面结构。
4. 响应式适配建议
为了让图片在不同设备上正常居中并保持比例，应添加以下CSS规则：
img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
说明：
- max-width: 100% 防止图片超出容器
- height: auto 保持原始宽高比
- 结合 margin: 0 auto 实现响应式水平居中
搭配 Flexbox 使用，可同时满足居中与自适应需求。
基本上就这些。选择哪种方式取决于具体布局需求。日常开发中，推荐优先使用 Flexbox 方案，结构清晰且易于维护。响应式设计不可忽视图片的缩放与居中一致性，合理设置CSS能有效提升用户体验。