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

高さを中央寄せする場合は、基本的には高さを知っている必要があります。
しかし、レスポンシブの場合は、高さが動的に動いてしまいます。

そこで、高さを意識しなくても上下左右中央揃えする方法を紹介します。めっちゃ便利で使っています。
abosoluteで揃えるやり方です。

上下揃え

<style>
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>
 
 
<div class="parent">
<p class="child">上下揃え</p>
</div>

上下左右揃え


<style>
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
 
<div class="parent">
<p class="child">上下左右揃え</p>