Javascript窗口定位答案

【问题标题】：Javascript window positioningJavascript窗口定位
【发布时间】：2015-10-13 09:45:33
【问题描述】：

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

这是 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 窗口：

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 窗口代码的行为方式以及如何让它在所有设备上正常工作？

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

谢谢！

【问题讨论】：

您是否尝试使用 CSS 将 #gatewaydiv（垂直和水平）居中？
@Xahed Kamal 是的，我有：@media (max-width: 768px) { #gatewaydiv { margin: auto; } 但它几乎没有任何区别。
好的。大多数时候，我使用 CSS 将 div 垂直和水平居中。给你作为答案。

标签： javascript html css position window

【解决方案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% 并禁用/删除 Javascript。

另外，替换这一行 -

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

通过这条线-

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

【讨论】：

谢谢！这绝对是有帮助的，但不是 100% 居中。如何在不弄乱整个 JavaScript 的情况下禁用 JavaScript 的特定部分？
只禁用这一行 -- $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display '， '排队'）; ..... 使用 //（双斜杠）将代码转换为注释。如果禁用此行，您将拥有绝对居中的 div
太棒了！非常感谢！

【解决方案2】：

也许你可以添加：

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

【讨论】：