只需设置父div css属性“text-align:center;”

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

根据您的需要修改高度值。

我已经尝试了许多方法，但只有这一种适用于容器div中的多个内联元素。下面是将div中的所有内容对齐在中间的代码。

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

示例代码在这里:https://jsfiddle.net/yogendrasinh/2vq0c68m/

简单。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>

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}