中央寄せ

  • text-align: center (ブロック要素内のテキスト)
  • margin: auto (ブロック要素)
  • vertical-align: middle (インライン要素内の縦方向)

参考:

CSS で中央寄せの方法いろいろメモ – Qiita

CSS で要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

CSS で中央寄せする9つの方法 (縦・横にセンタリング) | サルワカ

要素を上下や左右に中央寄せする簡単な方法 | KuzLog

CSS で上下左右に中央寄せする方法、全部まとめ | WWWクリエイターズ

ブロック要素に position: absolute を使う

  • 外側の要素に position: relative;
  • position: absolute;
  • top, bottom, left, right0 を指定
  • margin: auto;
.outer {
  position: relative;
}

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

参考:

CSS で要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

フレックスボックスを使う

  • 外側の要素に flex を指定
  • justify-content: center;
  • align-items: center;
.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

参考:

CSS で要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

ツール

参考:

How to Center in CSS

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です