CSSで中央揃え指定する方法 Flexbox／position

親要素の横幅と縦幅が可変する場合、CSSで中央揃えにする方法です。
実務でよく使うFlexbox版とposition版をまとめました👍

縦のみ中央揃え

ボタンのアイコンなど縦位置のみ中央揃え指定する場合に使うCSS指定です。

Flexbox

.hoge{
  display: flex;
  align-items: center;
}

Flexboxは2行で縦中央揃えが可能です。

position

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

親要素に position: relative; を指定し、子要素を osition: absolute; で縦中央揃え指定します。

縦のみ中央揃え：デモ

See the Pen CSSで縦のみ中央揃え by harumi-sato (@harumi-sato) on CodePen.

縦横 中央揃え

親要素に対して縦横中央揃えにする方法です
メインビジュアルでよく使うCSS指定です🏙

Flexbox

.hoge{
  display: flex;
  align-items: center;
  justify-content:center;
}

Flexboxは3行で縦横中央揃えが可能です。

position

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%,-50%);
}

親要素に position: relative; を指定し、子要素を osition: absolute; で縦横中央揃え指定します。

縦横中央揃え：デモ

See the Pen CSSで縦横 中央揃え by harumi-sato (@harumi-sato) on CodePen.

あわせて読みたい

上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA
https://ics.media/entry/17522