Div 가로 세로 가운데와 세로 가운데

페이지의 body의 가로 세로 가운데와 세로 가운데에 div를 정렬하고 싶습니다. Div 가로 세로 가운데와 세로 가운데

는 CSS :

.loginBody { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 
.loginDiv { 
    position: absolute; 
    left: 35%; 
    top: 35%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
}

그리고 나는이 HTML이 : 지금은 작동하고

<body class="loginBody"> 
    <form id="form1"> 
    <div class="loginDiv"> 

    </div> 
    </form> 
</body>

내가가 원하는,하지만 브라우저의 크기를 조정하는 경우, 그것은 완전히 아마, 왜곡되었다로를 이것은 절대 위치 지정 때문입니다. 크기를 조정할 파이어 폭스 : 나는 스크린 샷의 일부를 표시하고 크기를 조정할 IE에서 enter image description here

가 : 최대화 된 창에서이 enter image description here

: enter image description here

크기가 조정를 크롬

이 문제를 해결하고 상대 위치 지정을 사용하여 가운데 정렬을 수행 할 수있는 방법이 있습니까?

감사합니다.

편집 :

의 크기를 변경할 파이어 폭스에서 더 스크롤 막대가 표시되지 않습니다하지만 다른 브라우저에 나타납니다. enter image description here

출처

2012-03-11 Tapas Bose

이 시도 :

.loginDiv { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
    margin-left: -273px; /*half width*/ 
    margin-top: -132px; /*half height*/ 
}

당신은 절반 크기에 의해 중앙으로 이동, 다시보다 왼쪽 - 그게 중심합니다도에 이것은

출처

2012-03-11 15:47:22 StilgarBF

감사했다 지금 노력하고 있지만, 파이어 폭스에서 한 가지 문제 일 크기를 조정하는 동안 스크롤 막대가 없지만 다른 브라우저에 표시됩니다. 나는 내 질문을 업데이트했다. 그것을보십시오. –

당신이 스크롤바를 원하지 않는다면 - 몸체에'overflow : hidden'을 추가하십시오. – StilgarBF

아니요, 스크롤바를 원하지 않습니다. 그래서 바디에'overflow : auto'를 설정 했지 만 그려진 것처럼 스크롤바는 없습니다. –

#div { 
    height: 200px; 
    width: 100px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
}

크기를 조정 div를 센터링하는 일반적인 방법. 당신은 그것을 절대적으로 배치하고, 그 다음 절반으로 반쯤 이동하십시오. 그런 다음 위치 지정하는 div의 크기 절반만큼 여백을두고 위치를 조정하십시오. 이 모달 팝업을 할 때, 도움이 스크롤 경우에도 장소에 사업부를 유지하지만 고정 된 위치를 사용합니다 참고로

(.. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

출처

2012-03-11 15:47:29 Greg

도움을 주셔서 감사합니다. 이제는 작동하지만 파이어 폭스의 문제 중 하나는 크기를 조정할 때 스크롤 막대가 없지만 다른 브라우저에서는 나타납니다. 나는 내 질문을 업데이트했다. 그것을보십시오. –

http://jsfiddle.net/mAVd6/2/이 작업은 기본적으로 페이지 작성 방법을 반영합니까? Firefox에서 스크롤 막대를 생성합니까? 다른 브라우저? - 스크롤 막대에 어떤 일이 일어날지를 고정 된 것으로 바꿀 경우?! – Greg

위치를 절대 값에서 고정 값으로 변경하면 모든 브라우저에 스크롤 막대가 나타나지 않습니다. –

페이지의 콘텐츠입니다 사업부를 확인하고 확인에 " 다음 CSS를 만족 "클래스는.이. 도움을. 누군가가 도움이되기를 바랍니다. 안드로이드 장치에 대한 폰갭으로 jQuery를 모바일에 나를 위해

CSS

.content { 

     width: 100%; 
     height: 100%; 
     top: 25%; 
     left: 25% 
     right: 25%; 
     text-align: center; 
     position: fixed; 
}

출처

2012-08-07 17:49:06

Div 가로 세로 가운데와 세로 가운데

답변

관련 문제