html - 子 div タグの垂直方向の配置

Question

重複の可能性:
div 内の要素の垂直方向の配置

私は div タグを持っています。彼には img タグがあります。div タグのサイズは静的です: 200x200、img のサイズは常に 200px 未満ですが、どのくらい正確かは事前にわかりません。img を常に div タグの中央に配置したいのですが、水平に作成しますが、これを垂直にするにはどうすればよいですか?

   <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) */;