现在是2016年……为什么不使用flexbox? 它的反应也很灵敏。享受。 在{# 显示:flex; 对齐项目:中心; justify-content:中心; ｝ < div id = " / " > < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >

现在是2016年……为什么不使用flexbox? 它的反应也很灵敏。享受。 在{# 显示:flex; 对齐项目:中心; justify-content:中心; ｝ < div id = " / " > < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >

HTML:

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

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

身体{ 保证金: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

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

标记的答案将不会垂直对齐图像。适合现代浏览器的解决方案是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>