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

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

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

position: abosoluteを使います。

上下揃え

上下の真ん中
<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
}

おわり


position: abosoluteを使って、上下左右に中央揃えする方法の紹介でした。

マジで便利でわたしも多用しています。ぜひ、みなさまも使ってみてください!

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事