Мне было интересно, что будет лучшим способом вертикального центрирования div внутри другого div. Единственное ограничение, которое у меня есть, это то, что.anim должен оставаться относительным! Я использовал текущий код, который у меня теперь внизу. Спасибо, парни!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
Из вашего вопроса, похоже, вы хотите что-то вроде этого... div.spacer
вертикально центрирован, а div.anim
остается относительным.
div.spacer
поле div.spacer
должно быть отрицательной половиной высоты .spacer
.
Это решение работает только с фиксированной высотой для .spacer
.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
согласно w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Уровень CSS 2 не имеет свойства для вертикального выравнивания объектов. Вероятно, будет один уровень CSS 3. Но даже в CSS2 вы можете центрировать блоки по вертикали, объединяя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть центрировано по вертикали.
поэтому код действительно прост
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
вот демонстрация http://jsfiddle.net/AbTxS/
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
было бы вертикально выровнено
.anim
и .spacer
и установить его display:table-row
, если вы собираетесь сделать что - то вроде этого. CSS таблицы должны имитировать реальные таблицы.
Легкий способ сделать это - дать вашему .anim
div фиксированную высоту, допустим, 500 пикселей.
Затем вы можете просто добавить margin-top
:
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}