CSS, 画像の上に文字を重ねる方法

  <div class="photo"><img src="画像" alt="">
    <p>テキスト</p>
  </div>

.photo{
   width: 500px;
   height: auto;
   position: relative;
}
img{
   width: 100%;
   height: 100%;
}
p{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 36px;
   font-weight: bold;
   color: #fff;
}