HTML CSS中如何让图片在DIV中水平垂直居中图片img标签居中对齐有哪些方法

在DIV中怎样实现图片的水平垂直居中

要让图片在DIV里既水平方向又垂直方向居中显示，方法其实挺多的，大家可以根据自己的需求灵活选择：

使用flex布局
这个方法简直太简单了！直接给容器设置display: flex;，接着加上justify-content: center;（水平居中）和align-items: center;（垂直居中），就能轻松搞定各种图片居中问题，代码简洁又高效。
利用table-cell和vertical-align
如果你喜欢传统方法，可以把DIV设置成display: table-cell;，再设置vertical-align: middle;，这招对垂直居中很有用，尤其是在不想用flex时。记住，容器需要有固定的高度才管用哦。
结合margin和display
把图片设置成display: block;，然后给它加上margin: auto;，这样图片水平居中就没问题啦。但是这个方法单独只能实现水平居中，要想垂直也一起居中，还得结合其他技巧。

来啦，咱们详细罗列下关于img标签如何实现各种方向居中，顺带把一些零散的小技巧也集中讲讲：

水平居中——margin自动和text-align
- 给图片设置display: block;，然后margin: 0 auto;，你就可以看到图片乖乖跑到中间去了。
- 如果你用的是内联元素包裹图片，（比如span），给父盒子加text-align: center;也能让图片水平居中，超级适合小场景。
垂直居中——flex或者line-height
- flex惊艳众人，不仅能横向居中，也能纵向对齐，非常方便。给父容器配置display: flex; align-items: center;，就能让图片立马竖起来。
- 如果对flex不熟悉，可以试试line-height，特别是文字和图片一起垂直居中的场景，给行高加个图片高度差不多，效果杠杠的。
同时水平垂直居中——flex和position联合招数
- flex是真爱！展现咱颜值的最好帮手。
- 或者用position: relative;给容器定位，position: absolute;加在图片上，配合top: 50%; left: 50%; transform: translate(-50%, -50%);，这个方法炫酷又精准。
排查图片下方的小空隙
- 这个坑不少人踩过，底部空隙其实是图片的vertical-align默认为baseline导致，试试改成vertical-align: middle;或者干脆给图片display: block;，空隙说拜拜。