html - div内の中央h2-非常に基本

Question

h2を#topの中央に配置したいのですが、vert-aliigntの中央が同じ自動マージンで機能しません...どうすればよいかわかりません。

#top {
    display: block;
    position: relative;
    height: 100px;
    background-color: rgba(89,144,222,.6);
}
#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
    font-size: 50px;
}

効果は-

Answer 1

line-height:100px; vertical-align:middle#topに設定します。

Answer 2

を使用display:tableしdisplay:table-cellて、vertical-alingプロパティを使用できます。

HTML

<div id="table">
    <div id="top">  
        <h2>Personal webpage</h2>
    </div>
</div>

CSS

#table{
    width:100%;
    display:table;
}

#top {
    display: table-cell;
    position: relative;
    width:100%;
    height: 100px;
    background-color: rgba(89,144,222,.6);
    vertical-align:middle;
}

#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
} 

JSFiddle。