Javascript 如何在移动浏览器上使元素在视口宽度和高度上居中？

有没有办法使元素在移动浏览器的视口中居中

这意味着，当用户收缩以进行缩放时，他们仍应在视口中心看到元素（比如样式为窗口的div）。

您所说的“他们仍应看到元素”是什么意思？如果用户缩放，他将只看到图像的一部分。但如果需要，可以使用此元禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

---

我找不到HTML\CSS的直接方法

您可以使用JavaScript检测页面缩放，然后计算相对于原始大小和缩放因子的绝对大小

看看这个：

---

有一种非常好且通用的方法。

您可以尝试定位固定的div，并使用边距和上/左组合将其居中：

.center {
    position:fixed;
    z-index:999;
    width:200px;
    height:200px;
    background:#4679BD;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    left:50%;
}

---

JSFiddle:

事实证明，在我的ipadmini和安卓4.0设备的ios浏览器中，捏缩缩放会触发窗口滚动事件

$(window).on("resize scroll", function () {
    clearTimeout(pinchToZoomCheckTimer);
    pinchToZoomCheckTimer = setTimeout( function () {
        var width = window.innerWidth || document.documentElement.clientWidth;
        var height = window.innerHeight || document.documentElement.clientHeight;

        dlgInner.width(width);
        dlgInner.height(height);
        dlgInner.css("top",window.pageYOffset+"px");
        dlgInner.css("left",window.pageXOffset+"px");
    }, 50);
});

这将使div在视口使用的确切位置上居中。因为它是透明的，所以它“有点”占据了整个视口。我读到一些浏览器报告window.innerWidth的像素数增加了一些，但我可以接受~20px的位移

---

在我的ipad mini和安卓nexus上放大后，在收缩缩放和滚动时工作

android 2.2Flat out上的相当多的bug禁用缩放对于真正想要缩放的人来说有点像是一个愚蠢的举动。是的，对于@Roko来说，这个示例代码只适用于iOS Safari。如果他找不到问题的解决方案，这只是一个解决方案。@Aliasse，谢谢，我正在使用类似的方法，当弹出框出现时，我正在替换metatag，基本上禁用缩放。这在android 4.0上的chrome浏览器中也可以使用。当页面缩放到元素溢出视口的位置时，您认为会发生什么情况？您是否尝试过“位置修复”？因为在我看来，这很简单，只需将浏览器的高度与元素的高度偏移即可。但是当你缩放时，整个点是放大到某一点，为什么你要保持一个元素在中间？@ JAMEHUTBER FYEAUDION <代码>位置：固定< /代码>对任何IOSNONE都不起作用，所以谢谢你的提示：）JAMEHUTBER这是上面的请求。我没有提出这个要求。我个人认为我们应该完全禁用缩放功能，并使用css媒体查询根据屏幕大小调整内容。由于这可能不是一个选项，我想知道我是否错过了任何机会。该块将在缩放后错位。我正在使用类似的css居中方法。它不适用于缩放。