Html 如何使div与position relative居中，position relative也是css中的显示表格单元？

我试图在页面上水平和垂直居中放置一个img，当用户将鼠标悬停在图像上时，我希望文本显示在图像底部边缘的下方（因此文本将隐藏在img后面，直到鼠标悬停在上方）

---

在其周围添加一个div，如下所示

<div align='center'>
<div id='ma'></div>
</div>

---

希望这就是你要找的

试试这个高度：100vh，表示#ma高度值与窗高度值相同

#ma {
    display:block;
    text-align: center;
    width:100%;
    height:100vh;
}
#ma p {
 position: absolute; 
 display:inline-block; 
 width:306px;
}

---

这里有一个很好的选项：

#ma {
    display:block;
    text-align: center;
    width:100%;
    height:100vh;
}
#ma p {
 position: absolute; 
 display:inline-block; 
 width:306px;
}

#ma {
position: absolute;
width: 306px;
height: 400px;
-webkit-transition: height 1s;
transition: height 1s;
display: table-cell;
font-family: 'Roboto Condensed', sans-serif;
font-style: italic;
letter-spacing: 2px;
font-size: 120%;
color: rgb(253, 40, 129);
text-align: center;
vertical-align: bottom;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#ma p {
position: absolute;
bottom: 0;
width: 100%;
}