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

<div class="box">
<p>text</p>
<img src=〇〇.jpg alt="xxxx" >
</div>

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