图片上下左右居中css

html

html页面布局

<div class="div-box">
    <img src="./images/p_logos_2.jpg">
    <span class="img-middle"></span>
</div>

 

1. 设置div的宽高  line-height:

 .div-box {
     width: 180px;
     height: 166px;
     line-height: 166px;
     border: 1px solid #dadada;
     margin: 0 auto 20px;
     text-align: center;
 }

2. img 图片样式

.p-logo-box img {
    vertical-align: middle;
}

3. span 样式

.img-middle {
    height: 100%;
    width: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}