如何将我的 h2 标签放在空 div 的底部？答案

【问题标题】：how can i position my h2 tag at the bottom of an empty div?如何将我的 h2 标签放在空 div 的底部？
【发布时间】：2011-08-31 18:03:10
【问题描述】：

似乎无法做到这一点，我有一个 div 200px x 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; 
}

【问题讨论】：

标签： css

【解决方案1】：

这里提供了不止一种解决方案。

首先：将您的 CSS 更新为：

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

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

【讨论】：

【解决方案2】：

另一种方式是：

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

【讨论】：