【CSS】要素をposition:absoluteで中央に配置する方法

positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介

HTML

<div class="box">
<p>テキストテキスト</p>
<img src=xxx.jpg widht="600" height="400" alt="xxxx" >
</div>

CSS

.box{
    position: relative;
}
.box p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Javascript

入力無し

解説

cssについてですが、まずは、positionで上下それぞれ50％の位置にｐを配置します。これだけですと、ｐの右上の部分が.boxのちょうど真ん中に配置されたことになります。そこで、transformを使って目的の位置に配置さることになります。transformで上下に-50%を設定すると、ｐの大きさのー５０％分移動してくれます。するとｐがちょうど真ん中に配置されることになります。