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

https://arts-factory.net/position/

HTML

<div class=”box”>
<p>テキストテキスト</p>
<img src=xxx.jpg width=”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%);
}