我仍然有一些问题与其他解决方案在这里提出。最后，这对我来说是最好的:

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

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

您可以在本页阅读更多关于这种方法的信息。

将img设置为display:inline-block，同时将高级div设置为text-align:center也可以完成这项工作

编辑:对于那些正在玩display:inline-block >>>的人，不要忘记例如，两个div像

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

它们之间真的没有空格(如图所示)。

只是基本避免这些(内联块固有)之间的差距。这些空白可以在我现在写的每两个字之间看到!:-)所以…希望这能对你们有所帮助。

许多答案建议使用margin:0 auto，但只有当你试图使居中的元素不是浮动在左边或右边时，这才有效，即没有设置CSS属性float。为了做到这一点，将display属性应用到table-cell，然后将左右边距应用到auto，这样你的样式将看起来像style="display:table-cell;margin:0 auto;"

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

这为我工作，当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%，宽度:100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

标记的答案将不会垂直对齐图像。适合现代浏览器的解决方案是flexbox。flex容器可以配置为水平和垂直对齐其项。

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>