现在我有一个网站，总高度设置为 750px。我使用绝对和负边距方法将其垂直居中。除了一个问题外，它工作得很好。
如果我尝试在低分辨率显示器或移动设备上使用它，它会剪切页面顶部。
这是我的代码
.HTML
<body>
<div class="content">
CONTENT IS HERE
</div>
</body>
.CSS
.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px; /* Half of 750px */
}
尝试在正文标签上使用溢出：滚动;但我知道它不起作用，我没想到它会。 我完全被难住了！有什么建议吗？
您可以在小屏幕上使用媒体查询覆盖它：
.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px;
}
@media only screen and (max-height: 750px){
.content {
top:0;
margin-top:0;
}
}
实际上，这是一种优雅的降级方法，但如果您正在为移动设备设计，您可能希望以渐进式增强的方式进行。在这种情况下，它变为：
.content {
height:750px;
}
@media only screen and (min-height: 751px){
.content {
position:absolute;
top:50%;
margin-top:-375px;
}
}
说到兼容性，only关键字后面@media阻止旧版浏览器呈现包含的规则。
要达到（几乎）完全兼容，您可以使用这个非常有用的插件：响应.js
就滚动而言，
overflow:auto;
可能是您想要的，因为这会导致滚动条出现。
您遇到的这个整体问题是为什么大小调整几乎总是相对完成的原因。相对于百分比，或相对于 javascript 来确定客户端可查看区域。
另请注意，
.class {
与您class="content"的定义不匹配。这是一个逻辑错误，应替换为
.content {
尝试类似
margin-top:-25%;
因此在任何浏览器窗口高度上都是相同的
高度也是如此，使用百分比的组合，而不是像素。