HTML5图片居中靠CSS：①text-align:center（需块级容器）；②margin:0 auto（需display:block+设宽）；③Flex布局（display:flex+justify-content:center，现代推荐但IE10-11有bug）。
HTML5 里让图片居中，关键不是“用什么新标签”，而是用对 CSS——
用 text-align: center 居中（适用于块级容器内）
最常用也最安全的方式：把 如果目标环境支持 Flex（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），这是最简洁可靠的方案。 立即学习“前端免费学习笔记（深入）”； 真正容易被忽略的点：居中效果是否受父容器 text-align: center。
margin: 0 auto，别忘了：那只是容器居中，不是图片居中用
margin: 0 auto 居中（需图片转为块级）
margin: 0 auto 居中；必须先用 display: block 转成块级。
auto 水平 margin 无效）margin: 0 auto 仍有效，因为块级图会占据整行宽度@@##@@
用 Flex 布局居中（现代推荐，但注意兼容性）
display: flex + justify-content: center 即可水平居中align-items: center 可同时垂直居中（常用于模态框、卡片图标等）flex: 1 行为异常，慎用于老项目padding、border 或 overflow 影响；尤其是用 Flex 时，如果父容器高度为 0 或 auto 且无内容撑开，垂直居中就看不出来。
