HTML5怎样让图片居中显示_HTML5图片居中显示办法【排版】

• 它只对行内级内容（包括 ）生效，不影响其他块级子元素
• 兼容所有浏览器，包括旧版 IE
• 如果容器有固定宽度且设置了 margin: 0 auto，别忘了：那只是容器居中，不是图片居中

   @@##@@ 

用 margin: 0 auto 居中（需图片转为块级）

默认是行内元素，不能直接用 margin: 0 auto 居中；必须先用 display: block 转成块级。

• 适合单张图、需要精确控制外边距的场景
• 必须显式设置图片宽度（否则 auto 水平 margin 无效）
• 如果父容器没设宽度，margin: 0 auto 仍有效，因为块级图会占据整行宽度

@@##@@

用 Flex 布局居中（现代推荐，但注意兼容性）

如果目标环境支持 Flex（chrome 29+、firefox 20+、safari 6.1+、edge 12+），这是最简洁可靠的方案。

立即学习“前端免费学习笔记（深入）”；

• 父容器设 display: flex + justify-content: center 即可水平居中
• 加 align-items: center 可同时垂直居中（常用于模态框、卡片图标等）
• 不用改 的 display 类型，也不用写宽高（除非你本来就需要）
• IE10–11 对 Flex 支持有 bug，比如 flex: 1 行为异常，慎用于老项目

   @@##@@ 

真正容易被忽略的点：居中效果是否受父容器 padding、border 或 overflow 影响；尤其是用 Flex 时，如果父容器高度为 0 或 auto 且无内容撑开，垂直居中就看不出来。