这招对我很管用:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

大多数解决方案都不起作用，因为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>

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

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

JSFiddle

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

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

这也可以使用Flexbox布局完成:

静态的大小 .parent { 显示:flex; 身高:300 px;/*或者*/ background - color: # 000; ｝ .child { 宽度:100 px;/*或者*/ 身高:100 px;/*或者*/ 保证金:汽车;/ *魔法!* / ｝ < div class = "父" > <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/> < / div >

动态规模 Html, body { 宽度:100%; 高度:100%; 显示:flex; background - color: # 999; ｝ * { 保证金:0; 填充:0; ｝ .parent { 保证金:汽车; background - color: # 000; 显示:flex; 高度:80%; 宽度:80%; ｝ .child { 保证金:汽车;/ *魔法!* / max-width: 100%; max-height: 100%; ｝ < div class = "父" > <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/> < / div >

我在这篇文章中找到了一个例子，它很好地解释了如何使用布局。