Question

我写了一个函数来将一个元素置于用户的屏幕中间：

function positionElmentAtCenterOfUserWindow(elementId){

    var userBrowserWidth = $(window).width();
    var userBrowserHeight = $(window).height();
    var elementWidth = elementId.width();
    var elementHeight = elementId.height();
    var marginRight = (userBrowserWidth - elementWidth) / 2 +'px';
    var marginTop = (userBrowserHeight - elementHeight) / 2 +'px';

    console.log(userBrowserWidth+'-'+elementWidth+' * '+userBrowserHeight+'-'+elementHeight);
    elementId.css('position','absolute');
    elementId.css('top',marginTop);
    elementId.css('right',marginRight);

}

当DOM准备就绪时，我在演示文稿中启动此功能。

$(document).ready(function() {

    positionElmentAtCenterOfUserWindow($("#presentation"));

});

用户窗口的大小始终向右返回，但elementWidth和elementHeight正在从页面刷新更改，从而导致危险行为。

这可以在我的网站上直接测试：idealmenu.ch

Answer 1

这基本上是一回事。如果有的话，你可以使用脚本来计算top和margin-top值以适应不同的高度。无需窗口大小值。

#presentation {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -160px;
}

Answer 2

哈！我已经为项目创建了这个函数。它使用纯Javascript。玩得开心！

function positionElmentAtCenterOfUserWindow(elementId){
 var main = document.getElementById('elementId');
 var wi=main.offsetWidth;
 var he=main.offsetHeight;
 var marginleft = wi / 2;
 var margintop = he / 2;
 main.style.marginLeft="-" + marginleft;
 main.style.marginTop="-" + margintop;
 main.style.position="absolute";
 main.style.left="50%";
 main.style.top="50%"
}

Answer 3

如果您不关心IE7 / 8

，可以在CSS中执行此操作

jsfiddle.net/W26mt

#presentation {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -m-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Answer 4

您可以使用此CSS将div放在屏幕中间。像创业板一样工作，即使在ie8

#yourDiv{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Answer 5

试试这里 - ＆gt; http://jsfiddle.net/Wbykp/1/] 1

删除JS代码并应用此CSS。

#sectionCentre
{
   margin: 20% auto auto;    
}

JS可能并不总是获得正确的宽度/高度，换句话说，您可能能够手动计算边距，因为其他DOM元素可能会占用一些空间。

希望这会有所帮助： 20％是因为你的div高度，它是从屋顶直到元素头部的空间。

我使用auto让浏览器根据总可用空间自行决定width（左右空格）。

我没有使用auto作为高度，因为它不起作用，如果文档的长度增加，你不希望文章div在那里遥不可及。

在页面上居中元素的问题

5 个答案: