我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。

怎样才能做到呢?

我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..


当前回答

如果你知道父div和图像的大小,你可以使用绝对定位。

其他回答

我发现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;
}

这是一种老式的解决方案,但浏览器市场份额已经足够大了,如果你不担心IE7的性能下降,你可能不需要IE黑客的部分。当你知道外部容器的尺寸,但可能知道也可能不知道内部图像的尺寸时,这种方法是有效的。

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}
 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>

一个简单而优雅的解决方案,每次都适用于我:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

在div中

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

就我个人而言,我会把它作为div的背景图像,CSS是这样的:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(假设一个id="demo"的div,因为你已经指定了高度和宽度,添加背景应该不是问题)

让浏览器承担压力。