Javascript window定位

Question

我有这个 javascript 社交储物柜，它可以在 window 中运行，但在不同屏幕（如移动设备等）上测试它时遇到问题，因为 window改变位置。到目前为止，我知道这部分代码会影响定位，但我不知道如何。

这是CSS:

 #gatewaydiv
    {
    max-width: 15em;
    height: 6em;
    padding: 9em;
    position: absolute;
    display:none;
    background-color:#0e0f0f;

    text-align:center;
    font-family:arial;
    font-weight:bold;
    opacity:0.9;
    margin: auto;
    margin-top: -10%;
 }

这是 Javascript window:

function setupgateway()
{
var Left = $(window).width() /2.6;
Left = Left - $('#gatewaydiv').width() / 2;

var Top = $(window).height()/2;
Top = Top - $('#gatewaydiv').height()/6;

$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');

如果有人可以向我解释此 javascript window 代码的行为方式以及如何让它在所有设备上正常工作？

我已经阅读了很多类似的问题，但没有找到我的答案，因为代码完全不同，这也不是弹出窗口 window 而且我不是 javascript 专家，说实话。 You can see the live version here

谢谢！

Answer 1

您可以使用以下 CSS 使任何元素居中（垂直和水平）。例如 -

#gatewaydiv{
    position:absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 50%;
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%);
 }

请记住，您必须删除 margin-top:-10% 以及 disable/remove Javascript。

此外，替换此行 -

$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');

通过这一行-

$('#gatewaydiv').css('display', 'inline');

Answer 2

也许你可以添加：

window.addEventListener('resize', setupgateway);
window.addEventListener('scroll', setupgateway);

Javascript window定位

Javascript window positioning

html

javascript

css

position

window