html - この画像を垂直方向と水平方向の中央に配置するにはどうすればよいですか?

Question

幅と高さが可変のボックスがあります。私の例では、画像をボックスの中央に配置したいと考えています。CSSだけでこれにアプローチする最良の方法は何ですか? 必要がなければ、JavaScript を使用したくありません。

例: http://codepen.io/wesbos/pen/Ehour

私のHTML：

<div class="box">
  <img src="http://placekitten.com/200/200">
</div>

私のCSS：

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  text-align:center;
}

Answer 1

DIV を aにしてから、プロパティtable-cellを使用できます。vertical-align

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  text-align:center;
  vertical-align:middle;    
  display: table-cell;
}

img{
  display: inline-block;
}