gpt4 book ai didi

html - 我可以使用 CSS 在视口(viewport)中垂直居中固定高度的 DIV 吗?

转载 作者:太空狗 更新时间:2023-10-29 14:44:30 25 4
gpt4 key购买 nike

我们有一个登录页面,设计为在页面中间垂直居中放置一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com