Question

我们有一个登录页面，旨在将200px高的DIV垂直居中在页面中间。也就是说，无论浏览器窗口的大小如何，它都会在左边缘到右边缘（其中包含表单元素）创建一个200像素的蓝色波段，理想情况下

这必须是CSS解决方案。

所以让我们说这里有一些示例标记：

<body>
    <div id="mainDiv">
       <div id="centerDiv" style="height:200px;background-color:blue;color:white">
           Center this baby vertically in the #mainDiv, please!
        </div>
    </div>
</body>

假设我的CSS指示#mainDiv被拉伸以覆盖视口顶部和底部，这很容易做到。是否有CSS规则，我可以应用于任何元素或可靠和跨浏览器（包括IE6）垂直居中的页面#centerDiv？在完美的世界中，我们应该能够说出

#centerDiv {
  margin: auto 0;
}

即使在一个好的世界里，我们也应该能够用一些风格解决这个问题。但是要引用Ving Rhames的“低俗小说”中的角色，我们已经远远没有好了。

我查看了相关问题中提供的解决方案并搜索了网络。我找不到真正有效的100％。也许这是无法解决的，但我想我会在这里集体绞尽脑汁，看看能不能幸运。提前谢谢。

Answer 1

如果你有一个固定的高度，你可以做到。给孩子div一个50％的顶部和-100px的边缘顶部（反之亦然），你应该设置。

Answer 2

如果身高未知：

http://jsfiddle.net/Limitlessisa/a7xw6b2c/

.centerdiv{
   background:red;
   position:absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

}

Answer 3

对于中心的真实自动定位，内部DIV需要知道包含DIV的边界。如果您的容器没有硬边界，则内部DIV无法自动计算其自己的位置。它根本没有参考框架。

我认为你可以用一个简单的CSS解决方案来做到这一点：

    #mainDiv
    {

     border: 1px dashed #000000;   
    }

    #centerDiv
    {
        margin: 33% auto;
        height: 200px;          
    }

我可以使用CSS在视口中垂直居中固定高度的DIV吗？

3 个答案: