너비가 100 % 인 상자가 페이지 중앙에 있지 않습니다.

Question

화면에 상자를 배치하여 내용을 넣으려고합니다. 문제는 top을 50%에 설정하면 상자가 페이지의 100 % 중앙에 위치하지 않게된다는 것입니다. 상단에 60 %, 하단에 40 %와 비슷합니다.

다음은 HTML 코드입니다 :

​<div class="content"> 
    test 
</div>​ 

그리고 여기에 스타일 시트입니다 :

이

body, html { 
    color: #eaeaea; 
    font-family: Arial; 
    font-size: 12px; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

.content { 
    background-color: #000000; 
    padding: 10px 15px; 
    position: fixed; 
    top: 50%; 
    width: 100%; 
}​ 

데모 : http://jsfiddle.net/edgren/cceSw/

무엇 내가 놓친?

미리 감사드립니다.

Answer 1

너도 top에서 div의 높이를 빼야합니다. 이는 margin-top에 음수 여백을 설정하여 수행 할 수 있습니다. 그것의 경우 http://jsfiddle.net/cceSw/3/

내가 당신 .content

.content { 
background-color: #000000; 
padding: 10px 15px; 
position: fixed; 
top: 50%; 
width: 100%; 
height:50%; 
margin-top:-25%; 

}

에 height 및 margin-top 추가 :이 당신의 바이올린에 대한 업데이트입니다 -

여기를 보라 귀하의 콘텐츠가 다른 크기가 될 가능성이 높습니다 다음 JQuery를 사용하여 계산할 수 있습니다 동적으로 마진을 설정합니다.

Answer 2

div 위쪽의 여백을 50 %로 설정해야합니다.