Daaawx的答案是可行的，但我认为如果我们消除内联css会更干净。

身体{ 保证金:0; ｝ #over img { margin-left:汽车; margin-right:汽车; 显示:块; ｝ div.example { 位置:绝对的; 宽度:100%; 高度:100%; ｝ <div class="example" id="over"> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >

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

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

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

img.centered {
   display: block;
   margin: auto auto;
}

我向CSS添加了更多的属性。像这样:

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

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

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