带位置的居中div :当内容大于viewport时，对于Android设备绝对有偏移。
当以下内容出现在页面上时，Android浏览器上就会出现问题：
- 大小大于设备的视口的
div元素。(我用了1200页) - 一个或多个
div元素，以left:0; right:0; margin:auto;或left:50%; margin-left:-100px样式为中心。
问题是“居中”的div元素实际上不是。它们在左上有一个偏移量(如果垂直对中的话，则是顶部)。在Chrome和Dolphin (WebKit)的安卓设备上都出现了这个问题。它不会出现在台式机上(经过测试的Chrome、FireFox、Safari和IE)。
下面是一些CSS示例：
body{ margin:0; padding:0; }
.wide-element {
position:absolute;
height:800px; width:1200px;
left:50%; margin-left:-600px;
background:url(1200px-wide.png);
}
.fixed-1, .fixed-2, .absolute-1, .absolute-2 { height:200px; width:200px; }
.fixed-1 {
position:fixed; margin:auto;
left:0; right:0; top:0; bottom:0;
background:rgba(0, 0, 255, .5);
}
.fixed-2 {
position:fixed; margin:-105px 0 0 -105px;
left:50%; top:50%;
border:5px solid blue;
}
.absolute-1 {
position:absolute; margin:auto;
left:0; right:0; top:0; bottom:0;
background:rgba(255, 0, 0, .5);
}
.absolute-2{
position:absolute; margin:-105px 0 0 -105px;
left:50%; top:50%;
border:5px solid red;
}以及HTML：
<body>
<div class="wide-element"></div>
<div class="fixed-1"></div>
<div class="fixed-2"></div>
<div class="absolute-1"></div>
<div class="absolute-2"></div>
</body>我添加了position:fixed对来与position:absolute对进行对比。正如您在下面的屏幕截图中所看到的，fixed div都位于屏幕的实际中心，而absolute div则略高一些，位于布局中心的左侧。最有问题的部分是这个偏移量导致屏幕左侧的元素被切断，并且无法到达。
我想知道为什么(确切地)会发生这种情况(以及为什么只发生在移动设备上)，但真正的问题是：
如果没有安卓设备无法访问页面的部分，我如何可靠地将可能比视口更大的div元素集中起来呢？
回答 1
Stack Overflow用户
发布于 2014-04-07 02:47:13
这是对我自己问题的临时答复。
将<meta name="viewport" content="width=1200">行添加到head部分似乎迫使浏览器将视口设置为指定的大小。然而，由于这不是一个真正的解决方案，而且其他人可能需要一个更灵活的解决方案，所以我将它留给一个更完整的答案。
https://stackoverflow.com/questions/22902244
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号