absoluteとrelativeを利用した上下左右の中央よせ方法

HTML/CSS

absoluterelativeを利用して要素を中央よせにする方法は以下の2つがあります。

absoluteとrelativeを利用した要素の中央寄せの方法
  • marginプロパティを利用する方法
  • transformプロパティを利用する方法

今回は「上下」「左右」「上下左右」の中央よせについて、上記の手法を適用した例を紹介します。

左右中央よせ

marginプロパティを利用する方法

left: 0right: 0margin: autoで左右中央よせになります。
left: 0right: 0inset: auto 0で一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>

.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

See the Pen
absolute-x-center-with-margin
by Toshiharu Nishina (@nishina555)
on CodePen.

transformプロパティを利用する方法

left: 50%transform: translateX(-50%)で左右中央よせになります。

left: 50%で要素の左端が左右中央よせになります。transform: translateX(-50%)で要素の半分の幅だけ左に移動させることで、左右中央よせを実現しています。

translateX(-50%)translate(-50%, 0)でも指定可能です。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>

.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

See the Pen
absolute-x-center-with-transform
by Toshiharu Nishina (@nishina555)
on CodePen.

上下中央よせ

marginプロパティを利用する方法

top: 0bottom: 0margin: autoで上下中央よせになります。
top: 0bottom: 0inset: 0 autoで一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>

.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

See the Pen
absolute-y-center-with-margin
by Toshiharu Nishina (@nishina555)
on CodePen.

transformプロパティを利用する方法

top: 50%transform: translateY(-50%)で上下中央よせになります。

translateY(-50%)translate(0, -50%)でも指定可能です。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>

.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See the Pen
absolute-y-center-with-transform
by Toshiharu Nishina (@nishina555)
on CodePen.

上下中央よせ

marginプロパティを利用する方法

top: 0right: 0bottom: 0left: 0margin: autoで上下左右中央よせになります。top: 0right: 0bottom: 0left: 0inset: 0で一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>

.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

See the Pen
absolute-xy-center-with-margin
by Toshiharu Nishina (@nishina555)
on CodePen.

transformプロパティを利用する方法

left: 50%transform: translateX(-50%)top: 50%transform: translateY(-50%)で左右中央よせになります。

top: 50%left: 50%inset: 50% auto auto 50%で一括指定できます。
translateX(-50%)translateY(-50%)translate(-50%, -50%)で一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>

.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

See the Pen
absolute-xy-center-with-transform
by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです!

参考資料