css - div の中央に画像を垂直方向に配置します

Question

divの中央に画像を垂直方向に配置し、水平方向にも配置したい。現在、私のコードは水平方向の配置でのみ機能しますが、垂直方向にも配置したいと考えています。手伝ってくれませんか？

ここに私のcssコードがあります:

.centre
{
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

img
{
    vertical-align: middle;
}

Answer 1

display:table-cell;で使用するだけ .centreです。これを明確に示す例を次に示します。それに応じてセレクターを変更してください。http://jsfiddle.net/Y6NTf/

Answer 2

もう 1 つのオプションは、img positionを relative に設定し、topandleftをに設定すること50%です。これは完全な作業例です。

HTML:

<div id="myDiv">
  <img id="myImg" src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hat/arrow_black.png"></img>
</div>  

CSS:

#myDiv {
  height: 300px;
  width: 300px;
  background: grey;
}

#myImg {
  position:relative;
  top: 50%;
  left: 50%;
}