Question

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

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

我在StackOverflow上看到here和here，可以使用display:table-cell为可变大小的div提供解决方案。是否有任何其他解决方案，可能稍微简单一点，只使用position，margin等设置？

Here's the demo site我要应用此布局。

提前多多感谢！

Answer 1

你也可以尝试一些非常简单的东西：

<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，这使得它不那么性感 - 但我很确定它非常适合跨浏览器安全......

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

1 个答案: