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

HTML/CSS

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

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

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

左右中央よせ

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

left: 0、right: 0、margin: autoで左右中央よせになります。
left: 0とright: 0はinset: 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: 0、bottom: 0、margin: autoで上下中央よせになります。
top: 0とbottom: 0はinset: 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: 0、right: 0、bottom: 0、left: 0、margin: autoで上下左右中央よせになります。top: 0、right: 0、bottom: 0、left: 0はinset: 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)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND