css 使图片水平垂直居中

1.利用display:table-cell，具体代码如下：

html代码如下：

<div class="img_wrap">
 　　<img src="wgs.jpg">
</div>

css代码如下：

 .img_wrap{
     width: 400px;
     height: 300px;
    border: 1px dashed #ccc;
     display: table-cell; //主要是这个属性
     vertical-align: middle;
     text-align: center;}

效果如下：

2.采用背景法：

html代码如下：

<div class="img_wrap"></div>

css代码如下：

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

 

 

 css 使图片水平垂直居中      https://blog.csdn.net/example440982/article/details/80224177

第二种方式：图片居中方式

.tuanBoxMod .item .pic{ width:3.28rem; height:3.28rem;flex:0 0 3.28rem; margin-right:0.4rem;}
.tuanBoxMod .item .pic img{ width:100%; height:100%; border-radius:3px;object-fit: cover}