如何使图像中心(垂直和水平)在较大的div内

Question

如何使图像中心(垂直和水平)在较大的div内我有个div 200 x 200 px。我想把50 x 50 px的图像放在div的中间。怎么做呢？我可以通过使用text-align: center为了迪夫。但垂直排列是问题所在。

Answer 1

在旧浏览器中工作(IE>=8)

绝对位置与自动边距相结合，可以使元素水平和垂直地居中。元素位置可以基于使用相对定位的父元素位置。视图结果

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

Answer 2

另一种方法是创建一个table带着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只要有可能。