html如何让图片居中：三种主流写法

html如何让图片居中，常用方案分为行内居中、块级居中、弹性盒子居中，弹性盒子适配现代浏览器，块级方案兼容性覆盖老旧IE浏览器，行内居中仅适合图片和文字混排的场景，你要先确认图片外层容器是否有固定宽度，没有固定宽度时部分写法会失效，图片本身不设置宽高也会影响居中效果。

html如何让图片居中之行内方案

行内方案依靠文本居中属性text-align实现，你把img标签放在父容器里面，给父容器添加text-align:center，img标签默认属于行内替换元素，就可以跟随文本对齐规则居中。这个写法的局限很明确，图片会和同一行其他行内元素基线对齐，如果容器内还有文字，文字和图片底部会对齐，容易出现布局错位。

img标签不要单独设置display:block，一旦转为块级元素，text-align就无法控制它的位置。

html如何让图片居中之块级方案

块级方案是把img转为块元素，再设置左右外边距auto，代码结构为img{display:block;margin:0auto;}，这个写法要求图片的父容器具备可识别宽度，父容器宽度大于图片宽度时居中效果稳定，父容器宽度和图片一致时看不出居中变化。该写法兼容绝大多数浏览器，包括旧版IE8，适合静态页面、官网图文模块这类对兼容性要求较高的场景，很多传统静态网页模板都在使用这套写法。

html如何让图片居中之弹性盒子方案

弹性盒子是现在比较推荐的方式，你给图片的父容器设置display:flex，搭配justify-content:center实现水平居中，想要同时垂直居中可以增加align-items:center。弹性盒子不强制要求子元素设置宽高，也不受行内、块级元素特性约束，响应式布局、移动端页面里使用优势明显，仅不支持IE11之前的浏览器，在面向老旧工控浏览器、低版本内网系统页面时要谨慎选用。

不要直接给img标签设置text-align:center，这个属性写在图片本身不会生效，对齐属性只能作用在它的父容器上。

垂直居中单独使用margin:auto无法实现，需要flex或者定位方案，定位方案需要父容器设置relative、图片设置absolute，再配合left、top、transform调整位置，适合弹窗、浮层里的图片居中场景。

优先flex，其次marginauto。

图片外层如果存在浮动属性，浮动会脱离常规文档流，上面三种居中写法都会失效，你需要清除浮动或者改用flex布局替代浮动，才能恢复居中效果。