HTML5图片居中靠CSS：①text-align:center（需块级容器）；②margin:0 auto（需display:block+设宽）；③Flex布局（display:flex+justify-content:center，现代推荐但IE10-11有bug）。
HTML5 里让图片居中，关键不是“用什么新标签”，而是用对 CSS——<img> 本身仍是行内元素，不加样式不会自动居中。
用 text-align: center 居中（适用于块级容器内）
最常用也最安全的方式：把 <img> 放进一个块级容器（比如 <div>），然后给容器设 text-align: center。
- 它只对行内级内容（包括
<img>）生效，不影响其他块级子元素 - 兼容所有浏览器，包括旧版 IE
- 如果容器有固定宽度且设置了
margin: 0 auto，别忘了：那只是容器居中，不是图片居中
<div style="text-align: center;"> <img src="logo.png" alt="logo"> </div>
用 margin: 0 auto 居中（需图片转为块级）
<img> 默认是行内元素，不能直接用 margin: 0 auto 居中；必须先用 display: block 转成块级。
- 适合单张图、需要精确控制外边距的场景
- 必须显式设置图片宽度（否则
auto水平 margin 无效） - 如果父容器没设宽度，
margin: 0 auto仍有效，因为块级图会占据整行宽度
<img src="icon.jpg" alt="icon" style="display: block; margin: 0 auto; width: 120px;">
用 Flex 布局居中（现代推荐，但注意兼容性）
如果目标环境支持 Flex（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），这是最简洁可靠的方案。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+justify-content: center即可水平居中 - 加
align-items: center可同时垂直居中（常用于模态框、卡片图标等） - 不用改
<img>的 display 类型，也不用写宽高（除非你本来就需要） - IE10–11 对 Flex 支持有 bug，比如
flex: 1行为异常，慎用于老项目
<div style="display: flex; justify-content: center;"> <img src="banner.png" alt="banner"> </div>
真正容易被忽略的点：居中效果是否受父容器 padding、border 或 overflow 影响；尤其是用 Flex 时，如果父容器高度为 0 或 auto 且无内容撑开，垂直居中就看不出来。
