Вертикальное выравнивание в CSS?

Question

Итак, я знаю все о проблемах с vertical-align: middle; и о различных методах, которые люди использовали для вертикального выравнивания элементов в CSS. Но я не нашел тот, который работает для того, для чего он мне нужен.

В основном на моей странице есть только один <div>, который я хочу расположить в центре страницы, как по горизонтали, так и по вертикали. Очевидно, горизонтальная часть проста, но я зацикливаюсь на вертикальной части. Моя проблема в том, что высота <div> неизвестна; содержимое меняется, поэтому я не могу указать для него высоту.

У кого-нибудь есть советы для меня? Я готов использовать JavaScript, если это необходимо. Спасибо!

Answer 1

Короче говоря, вам нужно два элемента div , чтобы получить только вертикальное центрирование с помощью CSS.

С помощью Javascript вы можете сделать это с одним div .

Answer 2

Как вы сказали, вы не против использования JS, вот оно ... (я обычно никогда не отступаю от решения JS, но если вы круты с ним, то я тоже)

Если ваш CSS

#element {
    position: absolute;
    top: 50%;
}

Тогда вы можете использовать мой друг jQuery

$(document).ready(function() {
    var height = $('#element').height();
    $('#element').css({marginTop: '-' + (height / 2) + 'px'})

{);

Обратите внимание, это не проверено, но это должно быть начало. Надеюсь, высота / 2 будет работать как положено, если нет, попробуйте использовать parseInt();