html - H2をdiv要素の中央に配置します

Question

h2を#topの中央に配置したいのですが、vertical-align:middle機能しません...どうしたらよいかわかりません！

#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;
}

効果は-http://puu.sh/2mz5M

Answer 1

なるほど、divの高さが定義されているので、この状況に最適です。あなたはこれを行うことができます：

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

Answer 2

divの行の高さを設定すると機能するはずです。ここで方法2を参照してください。

http://phrogz.net/css/vertical-align/index.html

Answer 3

固定の高さと行の高さを指定して、垂直方向に整列し、テキストを整列します。テキストを中央に配置します。

#top {
    position: relative;
    height: 100px;
    line-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;
    }

Jsfiddle： http: //jsfiddle.net/XvFCT/