将图像垂直和水平居中的最好方法是使用两个容器，并应用以下属性:

外面的容器

应有显示:表;

内容器

应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;

一个演示

.outer-container { display: table; width: 80%; /* can be any width */ height: 120px; /* can be any height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .inner-container img { background: #fff; padding : 10px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> </div> </div>

在div中

style="text-align:center; line-height: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位置:相对;然后为你的形象这样做:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

这只是因为你知道图像和包含的div的尺寸。这也可以让你在包含的div中有其他项目…而使用行高之类的解决方案则不会。

编辑:注意…你的页边距是图像大小的负一半。

当然，另一种方法是使用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。

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

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

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

让浏览器承担压力。