html图片怎么居中，三种常用方案
html图片怎么居中，主流有三种稳定实现方式，分别是父容器text-align、flex布局、margin自动外边距，text-align适合行内图片，flex布局适配绝大多数现代网页，margin自动外边距仅对块级图片生效，你要先确认图片标签的display属性，inline、inline-block用text-align，block优先用margin，弹性布局不受display限制，IE11及更早版本对flex支持存在一定缺陷，老旧业务页面不建议直接选用flex方案。
html图片怎么居中，text-align方案
把img标签放在一个父标签内部，给父标签设置text-align:center，img本身默认是行内元素，行内元素会跟随父容器的文本对齐规则居中，代码结构为父div包裹img，仅在父元素写对齐规则，不要直接给img写text-align。
该方式只对inline、inline-block元素生效，如果你给img设置display:block，这个对齐代码就会失效，这是很多新手调试时遇到居中失效的常见原因。
html图片怎么居中，margin自动外边距方案
先把img转为块级元素，添加display:block，再设置margin:0auto，浏览器会自动分配左右剩余空间，实现水平居中，垂直方向不会产生变化，这个方案不需要额外父容器，直接写在img标签上即可，代码体量更小。
图片必须拥有明确宽度，宽度等于父容器宽度时，margin:auto不会产生居中效果，你可以给img固定px宽度，也可以设置max-width做自适应。
html图片怎么居中，flex布局方案
在图片的父容器设置display:flex，搭配justify-content:center实现水平居中，加上align-items:center可以同时完成水平、垂直双向居中，这个方案可以同时处理图片和其他子元素，自适应场景表现稳定。
| 方案 | 居中维度 | 浏览器适配 | 核心限制 |
|---|---|---|---|
| text-align | 仅水平 | 全浏览器兼容 | img不能是block |
| marginauto | 仅水平 | 全浏览器兼容 | img必须为块级、有宽度 |
| flex | 水平+垂直 | 现代浏览器，低版本IE较差 | 依赖父容器flex属性 |
flex是双向居中首选。
不要使用img标签自带align属性，该属性已经在HTML5规范中废弃，部分浏览器会忽略该属性，样式控制统一交给CSS完成。
父容器必须有可渲染宽度，父容器宽度为0的时候，所有居中代码都不会呈现肉眼可见的效果，内嵌在浮动元素、绝对定位盒子里的图片，需要单独调整定位规则，上面三种常规方案不一定生效。
移动端响应式页面，优先选择flex布局，配合max-width控制图片缩放，在不同屏幕尺寸下，居中状态不容易错乱。
