Css 如何将h2标记定位在空div的底部？

似乎无法做到这一点，我有一个div 200px 200px和一个h2标签，我想放在盒子的底部死点，我试过垂直对齐中心，但这似乎不能解决问题？我也尝试过添加相对于盒子的位置，然后添加相对于h2的绝对位置，但我确信有更好的方法吗

<div class="box">
<h2>My title</h2>
</div>

.box{
       width: 200px;
       height: 200px;
       background: #dedede;
}

h2{
    text-align: center;
    vertical-align: bottom; 
}

我的头衔
.盒子{
宽度：200px；
高度：200px；
背景：#dedede；
}
氢{
文本对齐：居中；
垂直对齐：底部对齐；
}

提供了多个解决方案

第一：将CSS更新为：

.box{
    width: 200px;
    height: 200px;
    background: #dedede;
    position:relative;
}

h2{
    text-align: center;
    width:100%;
    position:absolute;
    bottom:0;
}

另一种方法是：

h2{
    text-align: center;
    width:100%;
    line-height:370px;
}