使用定位。下面的方法对我很有效……

缩放到图像的中心(图像填充div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

没有缩放到图像的中心(图像不填充div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

试试下面的代码:

<div class="outer">
    <img src="image.png"/>
</div>

和CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

一个简单的方法是为div和图像创建单独的样式，然后分别放置它们。比方说，如果我想将图像位置设置为50%，那么我将有如下代码....

在{# 位置:绝对的; 宽度:100%; 高度:100%; ｝ # img { 位置:绝对的; 左:50%; 右:50%; ｝ < div id = " / " > <img src="img.png" id="img"> < / div >

简单。2018. FlexBox。检查浏览器支持-我可以使用 最小的解决方案:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

要获得尽可能广泛的浏览器支持:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

大多数解决方案都不起作用，因为100%高度的div并不意味着完整的浏览器高度。

使用高度:100vh;的工作原理。

<style type="text/css">
body {
  margin: 0;
}

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    vertical-align: middle;
}
</style>

<div id="over">
  <img src="test.png" alt="test" width="600">
</div>