div 안에 센터 h2 - 매우 기초적입니다

Question

#top 안에 h2를 중심에두고 싶지만 vert-aliignt middle doesnt는 동일한 자동 여백으로 작동합니다 ... 나는 무엇을 해야할지 전혀 모릅니다!

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

효과는 - #top에

Answer 1

설정 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.