Chrome＆amp; Safari Absolute Div显示问题

Question

出于某种原因，当您访问我网站的主页时：

在chrome或safari上的bluestarnj.com页面顶部被切断。这仅发生在浏览器高度较小的笔记本电脑上。它在firefox中完美呈现。现在，如果我告诉它从顶部定位300px，它将在这些浏览器中正确呈现，但是在Firefox中它被推到页面太远。该类的CSS代码如下：

.main_content {
width: 1000px;
height: 900px;
margin: auto;
position: absolute;
top: 50px; 
left: 0; 
bottom: 0; 
right: 0;
background: linear-gradient(white, grey);
border-style: solid;
border-width: 0.188em;
border-radius: 1.563em;
border-color: red;
display: block;
}

Answer 1

您需要从margin: auto; div中删除.main_content。

当窗口小于该窗口时，它仍然以自身为中心，但代价是离开页面。不要担心在较小的屏幕上进行垂直居中，只要在视口大于div时就在桌面上执行此操作。

Answer 2

问题似乎与“main_content”div的边缘有关。我在我的笔记本电脑和带有铬的大显示器上进行了测试，这就是我得到的：

如您所见，在较小的屏幕上，顶部和底部边距变为负值。我发现了这个问题：Margin auto goes to negative values有人提到了top和bottom之间的冲突。这就是这种情况：您设置顶部和底部以及固定高度。出于某种原因，Chrome首先将顶部设置为50，然后尝试调整边距（因为它设置为自动），因此底部将为0.删除bottom: 0px并且它有效！

编辑：但它不会再垂直居中。