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

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

HTML:

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

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

试试下面的代码:

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

和CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

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

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

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