中心h2內的div - 非常基礎

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

上#top返回集line-height:100px; vertical-align:middle。

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。