Question

有没有办法（没有绑定到window.resize事件）强制浮动DIV在调整浏览器窗口时重新定位？

为了帮助解释，我想这个伪代码看起来像是：

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

更新

我的查询已在下面得到解答，我想发布我的任务的最终结果 - 一个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();

Answer 1

如果你有一个固定大小的div，这很容易用CSS：

.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 */
}

问题当然是固定大小的元素并不理想。

Answer 2

最简单的方法是使用以下CSS代码：

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

上面CSS代码的关键行是“margin：0 auto;”它告诉浏览器自动设置左/右边距以使div保持在页面中心，即使您调整浏览器窗口的大小。

Answer 3

尝试this little article关于水平和垂直居中。它有点旧，有一些黑客，但你应该能够从中找出一些测试代码。

如何保持浮动div以窗口大小为中心（jQuery / CSS）

3 个答案: