Centre de h2 à l'intérieur d'un div - principes de base

Je veux de centre de h2 à l'intérieur de #top mais vert-aliignt milieu ne fonctionne pas même auto de la marge... je ave aucune idée de quoi faire!

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

effet est - Centre de h2 à l'intérieur d'un div - principes de base

OriginalL'auteur Filip Bartuzi | 2013-03-23

  1. 3

    Ensemble line-height:100px; vertical-align:middle sur #top.

    des œuvres. merci. La construction de la structure en HTML est srsly dur... dans le premier temps de l'essayer
    Ce tutoriel peut vous aider sur la façon de la position et de la structure HTML: barelyfitz.com/screencast/html-training/css/positioning

    OriginalL'auteur Joe Frambach

  2. 2

    Vous pouvez utiliser display:table et display:table-cell avec vertical-aling propriété .

    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.

    OriginalL'auteur Vucko