[メモ]positionとtranslateを使って要素を中央に配置する方法

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%);

}