positionを使ったボックスの中央配置

positionを使用したボックスの中央配置の記述。

HTML

<div class="box">
  <div class="box_inner">中央に表示したい内容</div>
</div>

CSS

.box {
  position: relative;
}

.box_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

上記、box-innerについては下記でも同様の結果が得られます。

.box_inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

サンプルを確認する