gpt4 book ai didi

html - 垂直和水平居中可变大小的 div

转载 作者:可可西里 更新时间:2023-11-01 14:56:06 25 4
gpt4 key购买 nike

我有一个 div,其宽度和高度是浏览器窗口的一些固定百分比,比如 70% 和 80%,具有特定的 min-widthmin-height。我希望这个 div 在浏览器窗口中垂直和水平居中显示。随着浏览器窗口的大小调整,我希望 div 自动调整大小并保持在中心。

首先,它不是固定宽度或高度的div,所以我不能使用负边距的absolute 定位。我使用了通常的 position: static 并将左右边距设置为 auto 以实现水平居中。这确保了自动调整大小和居中浏览器窗口调整大小仅在水平方向。这种东西对于垂直居中是行不通的。而且我不能为此使用负边距,因为位置不是 absolute(我需要它是水平的 static)。

我看到了herehere在 StackOverflow 上,可以使用 display:table-cell 解决可变大小的 div。是否有更好的任何其他解决方案,也许稍微简单一些,仅使用 positionmargin 等设置?

Here's the demo site我想在其中应用此布局。

提前致谢!

最佳答案

您也可以尝试一些非常简单的操作,例如:

<head>
<style type="text/css">
body, html {
height:100%;
margin:0;
}
#div1 {
height:10%;
}
#div2 {
background:#F00;
height:80%;
margin:0px auto;
width:80%;
}
#div3 {
height:10%;
}
</style>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>

当然,这种技术需要额外的 div,这使得它不是很性感 - 但我很确定它是跨浏览器安全的...

关于html - 垂直和水平居中可变大小的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8310641/

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