Question

我试图将一块动态高度居中。我遵循了Vanseo Design的精彩指南并实现了具有负边距的解决方案。经过一段时间的调整后，我得到了它在Chrome中工作，但在IE和Firefox中尝试时，负利润率很低！ Chrome和Safari按预期处理位置，但不处理IE和FF。如果它只是IE我可以做一个经典的IE-CSS-hack，但是混合使用Firefox ......任何知道如何使用动态元素在所有浏览器中使用垂直cenetring的人都可以使用？

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>

Answer 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;
}

垂直居中百分比

1 个答案: