DIV를 페이지 중심의 초점으로 만들기

Question

페이지 중앙에 로그인 폼을 만들고 싶습니다. 예 내가 밖으로 작동하지 않을 수있는 요소가 브라우저 창은 그것의에 크기

Answer 1

클래식 문제 :

는 추가 정보를 원하시면 여기를 보라. 다음은 CSS의 예입니다.

#your_element{ 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 600px; 
    height: 400px; 
    margin-left: -300px; 
    margin-top: -200px; 
} 

중요 비트 : 음수 여백은 각 치수의 절반이어야합니다.

Answer 2

이 position: fixed; 추가 변경 되어도 페이지의 중앙에 항상 요소를 중심으로하는 방법은 중앙하는 방법을 알고 here

입니다 스타일. 만약 당신이 그것을 중심으로하는 방법을 알고 있다면, 그냥 이것을 추가하는 것이 트릭을해야합니다. http://www.w3.org/TR/CSS2/visuren.html#choose-position

Answer 3

나는 수직 및 수평을 중심으로하는 컨테이너 필요로 할 때 나는 그냥이 상황이 템플릿의 HTML을 유지 :

CSS :

html, body { 
     height: 100%; 
    } 

    body { 
     background: #ffc; 
     margin: 0; 
     padding: 0; 
    } 

    #vertical-center { 
     float: left; 
     height: 50%; 
     width: 100%; 
     margin-top: -185px; 
    } 

    #content { 
     background: #ffffde; 
     border: 2px dashed red; 
     clear: both; 
     margin: 0 auto; 
     padding: 10px; 
     height: 350px; 
     width: 500px; 
    } 

HTML :

<div id="vertical-center"></div> 
<div id="content"> 
    <h1>Centered Content</h1> 
    <p>This content is centered on the page.</p> 
    <p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p> 
</div> 

을 # vertical-center에는 #content div의 절반 인 여백 상단이 있으며 음수 여야합니다.