基本上，将左右边距设置为自动将导致图像居中对齐。

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

这应该有用。

测试要点:要运行代码段，请单击左键运行代码段，然后单击右链接完整页

#渐变{ 位置:固定;z - index: 10; 上图:0;右:0;底:0;左:0; 透明度:0.8;背景:黑色; 宽度:100%;高度:100%; text-align:中心; ｝ .faders{显示:inline-block;高度:100%;vertical-align:中间;} .faderi{显示:inline-block; vertical-align:中间;} < div id = "渐变" > < span class = "投篮" > < / span > <img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" /> < / div >

使用自举程序align-items和justification -content。请看下面的例子:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>

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

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

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

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

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

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

水平放置

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

另一种方法:

#over img {
    display: inline-block;
    text-align: center;
}

只需要放置:

   #over img {

           vertical-align: middle;
        }