要素を中央寄せするとき、margin: 0 auto;などを使うケースも多いが、position: absolute;で要素浮かせる場合はその方法は使うことができない。
なので、position: absolute;を使用する際は下記のようにtransformプロパティを使って要素を中央に配置する方法がおすすめだ。
<div class="parents">
<p class="child">文言を中央に配置</p>
</div>.parents {
position: relative;
width: 300px;
height: 300px;
background-color: #eeeeee;
}
.child {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}ややこしいことは覚えなくていいので、とりあえず親要素にはposition: relative;を書き、子要素にはabsolute以下のプロパティを書くだけでオッケー。
See the Pen Untitled by Tomizawa (@masaya_coding) on CodePen.