如何将img垂直居中？

Posted 2020-09-16 Skura

方法一：

这种方法可实现图片超出frame尺寸时，自动选择水平、垂直居中，效果如下

<div class="frame">
  <img src="foo"/>
</div>

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

demo： 图片居中

 

方法二：

原理是，使用协助元素（这里是span），作为img的相邻元素，同为inline-block的两元素相邻时增加vertical-align: middle

可使两元素垂直居中，代码如下

<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

demo： 图片居中