how can i position my h2 tag at the bottom of an empty div?

dont seem to be able to do this, i have a div 200px x 200px and a h2 tag that i want to position at the bottom of the box dead center, ive tried vertical align center on this but that doesnt seem to solve the problem? I have also tried adding position relative to the box then absolute position to the h2 but im sure theres a better approach?

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

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

h2{
    text-align: center;
    vertical-a开发者_StackOverflow社区lign: bottom; 
}

there gives more than one solution.

First: Update your CSS to:

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

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

An other way is:

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