html - 子 div 标签的垂直对齐

Question

可能重复：
div中元素的垂直对齐

我有 div 标签，在他身上我有 img 标签，div 标签尺寸是静态的：200x200，img 尺寸总是小于 200px，但具体如何，我事先不知道。我希望 img 始终是 div 标签的中心，在我制作的水平方向上，但是如何使它成为 vertikal ？

   <div style="width: 200px; height: 200px; background-color: #090; text-align: center; ">
        <img src="pic.jpg">
    </div>

Answer 1

看看这个 JSFIDDLE

您可以使用 CSS calc()函数在 div 内垂直居中图像：

position: relative;
top: -webkit-calc(50% - []px )    /* [] = half the image height) */;  
top: calc(50% - []px)    /* [] = half the image height) */;