gpt4 book ai didi

html - 水平居中 DIV 并与顶部或底部保持固定距离,在窗口中不滚动

转载 作者:太空宇宙 更新时间:2023-11-03 21:56:59 25 4
gpt4 key购买 nike

假设我有一个要水平居中的 div,并设置为距窗口顶部或底部的固定距离。我想将它的宽度设置为 75%,并且它的高度根据动态内容是可变的。该页面永远不会有内容超出视口(viewport),因此它永远不会滚动。我怎样才能用 CSS 做到这一点? HTML 在这里,基本上:

<body>
<div id="main">
<div id="div_in_question">
Omg stuff goes here it will probably change though via jQuery.
</div>
</div>
</body>

最佳答案

你可以这样做Demo

HTML

<div class="container"></div>

CSS

.container {
height: 300px;
width: 75%;
position: absolute;
background-color: #ff0000;
margin-left: -37%;
left: 50%;
}

说明:将 position: absolute; 赋给你的 div ,让它水平居中的真正技巧是赋予 margin-left 这将是 div 总宽度的一半,并将 left 设为 50% 使其水平居中

关于html - 水平居中 DIV 并与顶部或底部保持固定距离,在窗口中不滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13133444/

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