[CSS] block要素を上下左右中央寄せにする2つの方法

要点解説
  • margin: auto;を使う
  • transform: translate;を使う

01. margin: auto; で中央に配置する方法

親要素にpositoin: absolute;かposition: relative; を設定し、
子要素にposition: absolute; margin: auto;を設定すると子要素が中央に配置されます。

親要素のCSS

.parent{
  position: relative;
}

子要素のCSS

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

中央に配置されているかチェック

See the Pen WRdRqG by journalismhacks (@journalismhacks) on CodePen.

狙い通り、div.childが上下左右中央に配置されました。

02. transform: translate; を中央に配置する方法

こちらはtransform: translateで配置する方法です。

親要素のCSS

.parent{
  position: relative;
}

子要素のCSS

.child{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

中央に配置されているかチェック

See the Pen ZLveLx by journalismhacks (@journalismhacks) on CodePen.

こちらでも先ほどと同様に上下左右中央に配置されました。

まとめ どちらの方法でも、同じように中央に配置されますが、それぞれの方法を理解しておくことでコーディングの幅が増えると思います!

コメントを残す