세로 정렬 - 어떻게 작동합니까?

Question

그래서 코드 on JSFidle가 있고, 섹션의 내부에 h1을 필드 중간에 만들 수 없습니다 ... 수직 정렬은 그의 일을하지 않습니다! 그리고 마진은 자동 동일합니다. Any1에는 아이디어가 있습니까?

#welcome{ 
    vertical-align: middle; 
    height: 100px; 
} 
#welcome h1{ 
    color: gray; 
    font-size: 2.1em; 
    font-family:"proxima-nova","sans-serif"; 
    text-align: center; 
    font-weight: bold; 
} 

Answer 1

설정 라인 높이를 수직 정렬됩니다 동일하게 라인 높이를 설정 한 경우 display:table-cell

section{ 
    display:table-cell; 
    vertical-align: middle; 
    position: relative; 
    top:0px; 
    border-bottom: 1px solid #eee; 
} 

DEMO

Answer 2

당신이 사업부의 높이로는

#welcome{ 
height: 100px; 
} 
#welcome h1{ 
line-height:100px; 
} 

Answer 3

추가 #welcome h1 to 텍스트를 가운데 맞추려는 높이. 이것은 텍스트를 가운데 맞추기위한 일반적인 방법입니다.

jsFiddle

#welcome h1 { 
    line-height: 100px; 
}