我们有一个登录页面，设计为在页面中间垂直居中放置一个 200 像素高的 DIV。也就是说，它创建了一个 200 像素的蓝色带，从左边缘到右边缘(其中包含表单元素)，理想情况下无论浏览器窗口如何调整大小，它都应该在视口(viewport)中保持垂直居中。
这一定是一个 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 被拉伸(stretch)以覆盖视口(viewport)的顶部和底部，这很容易做到。是否有 CSS 规则可以应用于任何元素或页面，这些元素或页面将可靠地跨浏览器(包括 IE6)垂直居中#centerDiv？在一个完美的世界中，我们应该能够说
#centerDiv {
margin: auto 0;
}
即使在一个 OK 的世界里，我们也应该能够用一些样式来解决这个问题。但引用 Ving Rhames 在 Pulp Fiction 中的 Angular 色的话，我们很 %#!ing far from OK。
我查看了相关问题中提供的解决方案并搜索了 Web。我找不到真正 100% 有效的东西。也许这是无法解决的，但我想我会把问题交给这里的集体大脑，看看我是否能走运。提前致谢。
最佳答案
如果你有一个固定的高度，你可以做到。给子 div 一个 50% 的顶部和一个 -100px 的边距顶部(或反之亦然)，你应该设置。
关于html - 我可以使用 CSS 在视口(viewport)中垂直居中固定高度的 DIV 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2371749/