수직 정렬은 결코 작동하지 않습니다

Question

네, 분명히 잘못하고 있습니다. 수평으로 정렬하는 것만 큼 쉬운 이유는 무엇입니까? 나는 앉아서 내 작업을 몇 시간 동안 중단하여 중간에 수직으로 정렬하는 방법을 찾지 않으므로 내 바보 같은 사람을 괴롭힐 필요가 없다. 정말로 질문하기 쉽다.

디스플레이 블록 또는 표 셀, 내가 읽은 모든 기능이 작동하지 않습니다. "어쩌면 내가 가로로 .divID img으로 내 img를 정렬하고 나서 div 자체를 수직 정렬하면 안 될까?"슬프게도, 나는 그것이 효과가 있었으면 좋겠다. 그러나 div를 가운데로 세로로 배치하려고 시도 했더라도 이미지 중심을 엉망으로 만들었고 작동하지 않았습니다.

TL

, DR : 나는 수직으로 너무 많은 물건 를 정렬하려고 싫어 .

헤더 이미지를 세로 및 가로로 가운데에 맞출려고합니다. 이 코드는 내가 작동하고있다.

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="logo"> 
      <img src="http://i.imgur.com/d0umnxt.png" /> 
     </div> 
    </div> 
</div> 

CSS

body { 
    margin: 0px; 
} 
#header { 
    width: 100%; 
    height: 100px; 
    background-color: #151B1F; 
} 
#logo { 
    display: block; 
    margin: auto; 
} 

Answer 1

나는 다음 사람만큼 많이 table 및 table-cell 싫어,하지만 당신은 부모 요소의 높이 (#header의를 알고있을 때 귀하의 경우), 일이 정말로 쉬워집니다.

Here's a working fiddle.

#header { 
    display: table; 
} 
#logo { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}