1

我正在尝试将一块动态高度居中。我遵循了 Vanseo Design 的优秀指南，并以负利润率实施了解决方案。经过一段时间的调整，我让它在 Chrome 中工作，但是在 IE 和 Firefox 中尝试时，负边距已经很远了！Chrome 和 Safari 按预期处理该位置，但 IE 和 FF 不处理。如果只有 IE，我可以完成经典的 IE-CSS-hack，但也可以使用 Firefox……任何知道如何使用动态元素获得垂直居中以在所有浏览器中工作的人？

Chrome / Safari 的屏幕截图（正确）：

来自 Firefox / IE 的屏幕截图（错误）：

<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>

<style type="text/css" media="screen"><!--
body 
    {
    color: white;
    background-color: #000;
    margin: 0px
}

#content
{    
    position: absolute;
    top: 50%;
    left: 0%;
    height: 64%;
    width: 100%;
    margin-top: -32%;
    text-align:center;
    background-color:#339;
}

--></style>
</head>

<body>
    <div id="content">
        <div class="bodytext">This box should be centered vertically</div>
    </div>
</body>
</html>
4

1 回答 1

1

好吧，你为你的元素设置了 64% 的高度，所以让我们做垫子:) 100-68 = 36 ,.，所以只剩下 36% 了。

然后除以 2 得到 18

通过将您的内容 ID 从顶部设置为 18% 并删除您的边距，一切都应该正常工作。:)

#content
{    
    position: absolute;
    top: 18%;
    left: 0%;
    height: 64%;
    width: 100%;
    text-align:center;
    background-color:#339;
}
于 2012-09-19T13:08:20.603 回答