Нужна помощь по вертикали в центре div

Мне было интересно, какой был бы лучший способ вертикально центрировать div внутри другого div. Единственное ограничение, которое у меня есть, это то, что .anim должен оставаться относительным! Я использовал текущий код, который у меня теперь внизу. Спасибо, парни!Нужна помощь по вертикали в центре div

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; 
}

источник

2013-11-27 kduan

.anim{display:table;} 
.spacer {display:table-cell; vertical-align:middle;}

бы его вертикально

источник

2013-11-27 23:26:20

Вы должны использовать другой блок элемент между '' .anim' и .spacer' и установить его на 'дисплей: настольный row' если вы собираетесь сделать что-то подобное. Таблицы CSS должны имитировать фактические таблицы. – fredsbend

Да, я пробовал этот метод раньше и странно не работал:/ – kduan

не уверен, что раньше у вас был позиционирующий материал, но это определенно остановило бы его от работы –

простой способ сделать это, чтобы дать вашим .anim Див фиксированную высоту , скажем, 500 пикселей.

Тогда вы можете просто добавить margin-top:

.anim { 
    margin-top: 100px; // (500 - 300)/2 = 100 
}

demo

источник

2013-11-27 23:39:50

есть ли способ сделать это без фиксированной высоты? Я использую проценты:/ – kduan

@kduan. Наличие элемента фиксированной высоты внутри контейнера переменной высоты может быть проблемой: например, если 50% эквивалентно 200px, тогда ваш элемент 300px будет переполняться из его родительского элемента! Какова логика этого требования 50% высоты? –

Ну, у меня есть экран, разделенный пополам. И я хочу поместить этот div в нижнюю половину. – kduan

согласно и3: 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/

источник

2013-11-27 23:42:48

Спасибо за помощь! Но проблема в том, что я не могу иметь фиксированную высоту: /. Я должен был упомянуть об этом раньше. Извините! – kduan

Из Вашего вопроса это выглядит, как вы хотите что-то вроде этого ... div.spacer центрирован и div.anim остается относительным.

Верхний край 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>

источник

2013-11-28 01:45:08 misterManSam

Не могу сделать фиксированную высоту жаль: / – kduan

Нужна помощь по вертикали в центре div

ответ

Смежные вопросы