上下左右の中央寄せ【HTML、CSS】

※自分用の備忘録です

使用する機会は多いけれど、忘れがちな上下左右のセンタリングのやり方をメモしておきます。

positionで指定する場合

.container {
  position: relative;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  right: -50%;
  transform: translate(-50%, -50%);
}

親要素に「position: relative;」、子要素に「position: absolute;」を指定します。

display: flex;を使用する場合

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

センタリングをしたい要素の親要素に「display: flex;」「justify-content: center;」「align-items: center;」を指定します。

同じ要素内にheightを指定する必要があります。

display: grid;を使用する場合

.親クラス {
  display: grid;
  place-items: center;
  height: 100vh;
}

センタリング要素の親クラスに「display: grid;」、「place-items: center;」を設定し、高さを指定します。

その他のHTML/CSSに関する記事はこちらから

HTML/CSSマガジン｜ピヨ彦｜note