css如何让图片居中 css图片居中方法介绍

很多做前端的朋友在写css的时候都不知道怎样让图片居中，下面小编就给大家来详细介绍一下css如何让图片居中   css图片居中方法介绍这一块的内容，希望能帮助到大家啊。

　　本方法适用图片尺寸不一，且需要根据页面大小实现自适应等比缩放的情况；

　　之前一直用的是背景图的方式来实现这个效果，可以这样做的一个弊端是不利于SEO 的优化，所以决定换种方式写，综合网上搜出来的文章，写了这个教程，供新手学习使用。

　　实现样式：

　　HTML结构

　　CSS样式

　　.wide {

　　width: 60%;

　　height: auto;

　　margin: 0 auto;

　　border: 1px solid #f2f2f2;

　　}

　　.wide .goods-name {

　　width: 100%;

　　height: 28px;

　　font-size: 14px;

　　padding: 0 10px;

　　box-sizing: border-box;

　　background-color: #fff;

　　}

　　.img-wrap { /*重点从这里开始*/

　　width: 100%;

　　height: 0;

　　padding-bottom: 60%;

　　overflow: hidden;

　　position: relative;

　　background-color: lightgray;

　　}

　　.img-wrap > div {

　　width: 100%;

　　height: 100%;

　　position: absolute;

　　display: flex;

　　align-items: center;

　　justify-content: center;

　　}

　　.img-wrap > div img {

　　width: auto;

　　height: auto;

　　max-width: 100%;

　　max-height: 100%;

　　}

　　简要说明：

　　1、.img-wrap 的 padding百分比值是相对于宽度的，这样我们就可以按照图片的比例来设置高度啦！height=0,padding-bottom=100% 正好是一个正方形（这里设置为60%）；设置相对定位是为了 能够使子元素 基于它设置宽高（这样padding的值会计算在内，不然子元素的高度设置百分比时只会是我们写的‘height: 0’）;

　　2、图片宽高 { width: auto; height: auto; max-width: 100%; max-height: 100%; } 这样图片可以自适应按父元素宽高等比例显示；

　　3、至此图片自适应就写好了，下面就是居中；

　　4、居中的方法很多；我这里用了flex布局，很容易就可以实现，如果要兼容IE和多版本浏览器请用其它居中方法实现；

　　补充：在设置图片时，可以把宽、高都设置成100%，然后使用CSS比较新的属性 object-fit 来实现图片按比例自适应居中显示。

上面就是关于css如何让图片居中   css图片居中方法介绍的全部内容介绍，希望上面的内容能帮助到大家。；、