CSS：ブロック要素の完全中央配置

See the Pen Absolute centering of block element by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

枠の親要素に対して、内部の子要素を完全中央配置しています。

子要素のCSSは下記。

.child {
  width: 100px;
  height: 100px;
  background-color: #ccc;

  //ここからが要点
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

これまではtop50%、left50%に、子要素自身の幅と高さの半分をマイナス値で入れたマージンを取るなど、子要素の大きさに対して固定値を計算して入れる必要があったため汎用的に作ることができませんでしたが、これなら汎用的な完全中央配置のスタイルを組めます。

※注意として上記手法はIE8以降で有効なCSSです。さすがにもうIE7は切っていいと思いますが。