我发现Valamas和Lepu上面的答案是最直接的答案，处理未知大小的图像，或已知大小的图像，你宁愿不硬编码到你的CSS中。我只是做了一些小调整:删除不相关的样式，大小为200px以匹配问题，并添加max-height/max-width来处理可能过大的图像。

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

当然，另一种方法是使用valign创建一个表。不管你是否知道div的高度，这都可以工作。

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

但只要可能，您应该始终坚持只使用CSS。

我一直在尝试用hmtl和css让图像在圆形内垂直和水平居中。

在结合了这篇文章中的几个观点后，我得出了以下结论:jsFiddle

下面是三列布局中的另一个示例:jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>

我们可以使用flex轻松实现这一点。不需要背景图片。

<！DOCTYPE html > < html > < >头 <时尚> # image-wrapper { 宽度:500 px; 身高:500 px; 边框:1px实体#333; 显示:flex; justify-content:中心; 对齐项目:中心; } > < /风格 > < /头 身体< > < div id = " image-wrapper " > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div > < /身体> < / html >

我喜欢跳老式马车!

以下是这个答案在2015年的更新。我开始使用CSS3 transform来做我的定位工作。这允许你不需要做任何额外的HTML，你不需要做数学(找到半宽的东西)，你可以在任何元素上使用它!

这里有一个例子(最后是小提琴)。HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

附带CSS:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

我最近经常做的就是给我想居中的东西一个类然后每次都重用这个类。例如:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

css

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

通过这种方式，我将始终能够将容器中的内容居中。你只需要确保你想居中的东西是在一个定义了位置的容器中。

这是小提琴

BTW:这也适用于在较小的divs中居中更大的divs。

在div中

style="text-align:center; line-height:200px"