「高さ分からない要素」をCSS（absolute）で上下左右中央揃えにする方法

2017年12月24日2021年11月26日

要素の高さを意識せずに上下中央に揃える方法を紹介します。

レスポンシブで要素の大きさが固定できない今の時代に合った指定の仕方だと思うので、ぜひ覚えてください！

position: abosoluteを使います。

はにわまん

absoluteとtransformの組み合わせはめっちゃ使ってます！

上下揃え

上下の真ん中

<div class="absolute-parent">
	<div class="absolute-middle">上下の真ん中</div>
</div>

.absolute-parent {
  position: relative;
  width: 100%;
  height: 300px;
  background: #00BCD4;
}
.absolute-middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff
}

左右揃え

左右の真ん中

<div class="absolute-parent">
	<div class="absolute-center">左右の真ん中</div>
</div>

.absolute-parent {
  position: relative;
  width: 100%;
  height: 300px;
  background: #00BCD4;
}
.absolute-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff
}

上下左右揃え

上下左右の真ん中

<div class="absolute-parent">
	<div class="absolute-middle-center">上下左右の真ん中</div>
</div>

.absolute-parent {
  position: relative;
  width: 100%;
  height: 300px;
  background: #00BCD4;
}
.absolute-middle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff
}