CSS 레이아웃은 CSS 레이아웃에 대해 다시 화면

Question

의 중심에 사업부를 배치 :

#container{ 
width:979px; 
height:590px; 
margin-left:auto; //works 
margin-right:auto; //works 
margin-top:auto; //doesn't work 
margin-bottom:auto; //doesn't work 
} 

그래서, 내가 #container 화면의 중앙에 배치 할.
나는 또한 시도했다 : margin : auto - resutl없이.

Answer 1

무엇과 같이 약 :

#container{ 
width:979px; 
height:590px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-295px 0 0 -490px; 
} 

Answer 2

시도해 보셨습니까? margin-top:50%; 시도해 보셨습니까?

Answer 3

가장 좋은 방법은 display: table-cell과 vertical-align: middle (IE7에서는 작동하지 않음)을 사용하는 것입니다.

우리는 당신의 HTML을 가지고 있지 않기 때문에 당신이 할 수있는 최선의 방법은 그것을 달성하기위한 다른 방법을 제시하는 this article입니다.

Answer 4

당신은 다음과 같은 작업을 수행 할 수 #container의 높이와 폭을 알고있는 경우 : 위치로 상대

설정 #container :

1. 이 위치로 용기 주위에 래퍼 사업부를 추가하고 설정을 절대 , 위쪽 : 50 %, 왼쪽 : 50 %, 여백 - 왼쪽 : -XXXpx, 여백 - 위쪽 : -XXXpx 여기서 XXX 값은 #container의 너비와 높이의 절반입니다.

Answer 5

아니면이 솔루션을 사용할 수 있습니다

<div class="container"> 
    <div class="block"> 
     <p>Hello world, i'm a vertical align div !</p> 
    </div>  
</div> 

div.bloc { 
    display:inline-block; 
    vertical-align:middle; 
} 

Answer 6

난 당신이 수직 중심 찾고있는 생각은, 그 작업을 수행하는 방법에 대한 blog있다. 호프 도움이됩니다.

Answer 7

css로하려면 수동으로 패딩을 설정해야합니다. 그렇지 않으면 당신이 동적하려는 경우에는 다음과 같은 자바 스크립트를 작성해야 -

var a = window.outerHeight; 
var b = $('#id of div').height(); 
var c = (a-b)/2; 
$('#id of div').css("margin-top",c); 

Answer 8

u는 단지 용기의 중앙에 배치하려는 경우 화면. 이

CSS를 시도 :

html, body { margin:0; padding:0; } 

#container{ 
width:979px; 
height:590px; 
margin:0 auto; 
} 

HTML

<div id="container"> 
Data goes here 
</div> 

희망이