CSSで上下左右中央配置をおこなう方法はいくつかあるが、今回はその中でも俺的に一番しっくりきた決定版となるコードを紹介する。

まずHTML側で、親子関係のブロック要素を用意しておく。

1
2
3
<div class="parent">
  <div class="children">hogehoge</div>
</div>

この親子クラスにCSSでそれぞれ以下のスタイルを当てる。

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.parent .children {
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}

たったこれだけで上下左右中央配置にすることができるので、このコードは非常に気に入っている。