Question

我正在努力将div中的div与position:fixed进行集中对齐（我需要修复它，因为此UI将浮动在现有页面的其余部分上）。中央div将包含大量内容，因此需要垂直滚动。它还需要相对于具有maxwidth的视口水平缩放。

这是我到目前为止的情况 - 它几乎就在那里 - 只是无法弄清楚如何集中黄色div。

编辑我需要支持IE9，FF，Chrome，Safari（如果可能）

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
        div {
            padding: 0px;
            margin: 0px;
        }
        #fix {
            position: fixed;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: red;
        }
        #my-wrap {
            position: relative;
            margin: 1em auto;
            background-color: green;
            width: 100%;
            height: 100%;
        }
        #my-details {
            position: absolute;
            width: 50%;
            max-width: 450px;
            top: 20px;
            background-color: yellow;
            bottom: 0px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div id="fix">
        <div id="my-wrap">
            <div id="my-details">
                <p>Lots of content in here....</p>
                <br style="clear: both" />
            </div>
        </div>
    </div>
</body>
</html>

谢谢！

Answer 1

最简单的方法是相对定位#my-details元素，而不是绝对定位它。然后，您可以简单地使用margin:0 auto来居中元素。由于元素不再是绝对定位的，因此您需要将其设置为100%的高度。要取代top:20px，您只需使用calc()，就像这样：height: calc(100% - 20px)。

Exmaple Here

#my-details {
    position:relative;
    margin:0 auto;
    height:calc(100% - 20px);
    width: 50%;
    max-width: 450px;
    top: 20px;
    background-color: yellow;
    bottom: 0px;
    overflow: scroll;
}

作为替代方案，您可以将top:20px更改为基于百分比的值，例如2%。然后，您可以使用98%的高度，并避免使用calc()。由于这可能不是最佳解决方案，您还可以使用以下内容：

Example Here

#fix {
    padding-top:1em;
}
#my-wrap {
    padding-top:20px;
}

基本上，此方法通过在父元素上添加top:20px值来避免padding-top。然后，元素的父级会收到padding-top值1em以取代margin: 1em auto。

固定容器中的中心对齐，可滚动的div

1 个答案: