는 정렬 수직 및 수평 정렬은

Question

나는 상자 VxH 센터를 정렬하려고하지만,하고 나는 점점 것 같다 그냥 조금 떨어져 :

HTML :

<div id="wrapper"> 
     <header> 
      <div id="logoWrapper"> 
       <div class="logo">Logo Here </div><!-- Logo End --> 
      </div><!-- Logo Wrapper --> 
    </header> 
</div><!-- Wrapper End --> 

CSS :

![#wrapper{ 
    width:955px; 
    margin:auto; 
} 

html body{ 
    background:#F1FF29; 
} 

#logoWrapper{ 
    width:429px; 
    height:179px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-100px; 
    margin-top:-50px; 
} 
.logo{ 
    display:block; 
    background:red; 
    width:429px; 
    height:179px; 
}] 

이미지 : http://i.stack.imgur.com/rZ2ng.png

Answer 1

이 값에 #logoWrapper에 대한 여백을 변경

:

margin-left:-215px; 
margin-top:-85px; 

그들은으로 로고의 너비와 높이의 절반이 필요합니다.

jsfiddle

편집 : 또한

, 당신이 이러한 스타일 '리셋'넣어 제안 :

html, body{ 
    background:#F1FF29; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}