css - ブラウザー間でサイズが不明な div を配置する

Question

div の中央揃えの垂直方向と水平方向の配置を実現しようとしています。これは私が使用しているスタイリングです：

.box{
  position:fixed;
  display:block;
  width:200px;
  height:400px;
  top:50%;
  left: 50%;
  width: 50%;
  transform: translateX(-50%) translateY(-50%);
  background:#ccc;
}

このスタイルは Firefox では完全に機能しますが、Chrome では機能しません。例を次に示します: http://codepen.io/0leg/full/HJjrK

興味深いのは、このチュートリアルのモーダルウィンドウからこのスタイルを解除したことです。