Как сохранить плавающий div на основе изменения размера окна (jQuery/CSS)

Есть ли способ (без привязки к событию window.resize), чтобы заставить плавающий DIV повторно центрировать себя при изменении размера окна браузера?

Чтобы объяснить это, я предполагаю, что псевдокод будет выглядеть примерно так:

div.left = 50% - (div.width / 2)
div.top = 50% - (div.height / 2)

UPDATE

На мой запрос, на который был дан ответ ниже, я хотел опубликовать окончательный результат моего квеста - метод расширения jQuery, позволяющий сосредоточить любой элемент блока - надеюсь, что он тоже поможет кому-то другому.

jQuery.fn.center = function() {
    var container = $(window);
    var top = -this.height() / 2;
    var left = -this.width() / 2;
    return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
}

Использование:

$('#mydiv').center();

Ответ 1

Это легко сделать с CSS, если у вас есть div с фиксированным размером:

.keepcentered {
    position:    absolute;
    left:        50%;        /* Start with top left in the center */
    top:         50%;
    width:       200px;      /* The fixed width... */
    height:      100px;      /* ...and height */
    margin-left: -100px;     /* Shift over half the width */
    margin-top:  -50px;      /* Shift up half the height */
    border: 1px solid black; /* Just for demo */
}

Проблема, конечно, в том, что элементы фиксированного размера не идеальны.

Ответ 2

Самый простой способ - со следующим кодом CSS:

#floating-div {
    width: 50%;
    border: 1px solid gray;
    margin: 0 auto;
}

Ключевой линией CSS-кода выше является "margin: 0 auto;" который говорит браузеру автоматически устанавливать поля влево/вправо, чтобы сохранить div на странице, даже если вы измените размер окна браузера.

Ответ 3

Попробуйте эту небольшую статью о горизонтальном и вертикальном центрировании. Он немного стар и имеет несколько хаков, но вы должны иметь возможность выработать из него некоторый тестовый код.