CSSのposition:fixedで高さが不明な要素を上下左右中央揃えにする

今回は、幅は分かってるが高さがわからない要素を上下左右中央揃えする方法を紹介します。高さが分かっていればネガティブマージンで上下左右中央揃えにできますが、高さが分かっていなければできません。では、方法を説明していきます。

ソースコード

.box {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 600px;  /* Set Width */
  margin: auto;
}
.box > div {
  display: table-cell;
}

これで上下左右中央揃えを実現できます。ちなみにwidth:autoとしても大丈夫です。おまじないとして覚えておきましょう。