макета CSS разместить DIV на центре экрана

Question

Снова о макете CSS:

#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 - без повтора.

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 вы можете сделать следующее:

1. Добавить обертки DIV вокруг контейнера и установите его в положение: относительный
2. Set #container быть позиция: абсолютная , верх: 50%, слева: 50%, margin-left: -XXXpx, margin-top: -XXXpx, где значения XXX составляют половину ширины и высоты вашего # контейнера.

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. или иначе, если вы хотите, чтобы быть динамичным, вы должны написать JavaScript, как следующее: -

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

Answer 8

Если и просто хотите, чтобы контейнер поместить в центре экран. попробуйте этот

CSS:

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

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

HTML

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

Надеется, что это помогает