如何在绝对位置和相对位置之间对齐 div答案

【问题标题】：how to align a div between a position absolute and relative如何在绝对位置和相对位置之间对齐 div
【发布时间】：2013-03-17 00:24:22
【问题描述】：

我有 3 个 div。第一个 div 在顶部，位置相对，第二个 div 在底部，它的位置是绝对的。还有第三个 div，我希望它位于中间。我希望第三个 div 位于中间，这样无论我更改浏览器的高度，我都希望它与 20px 填充对齐，具体取决于第一个和第二个。

middle-box{
padding: 20px;
}

.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}

.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}

【问题讨论】：

我认为这会很棘手，因为 position:absolute;不会在页面上保留其原始空间，因此您不会真正知道它有多高，但我敢肯定它可能，祝你好运
“对齐20px间距”是什么意思？
根据其他两个 div，我希望中间 div 的顶部边距和底部边距为 20px。所以 div 的高度并不重要，但我希望它在顶部和底部 div 之间有 20px 的间隙。

标签： css html position alignment center

【解决方案1】：

关于同一个问题的变体已在 SO 上被问过数十次。您想要 20px 边距的事实是无关紧要的。整体结构可能很棘手。

我认为这符合您的要求。您可能必须做出的一种妥协是在页眉和页脚上设置固定高度。

http://jsfiddle.net/Fd6f9/1

.top-box {
    height: 60px;
    position: relative;
}
.middle-box {
    position: absolute;
    top: 70px;
    bottom: 80px;
    left: 20px;
    right: 20px;
    margin: 20px 0;
}
.bottom-box {
    height: 56px;
    padding: 12px 0 12px;
    position: absolute;
    bottom: 0px;
}

【讨论】：

【解决方案2】：

如果您选择将底框“卡”在浏览器窗口的底部，则中间框和底框之间的空间会可变，具体取决于中间的内容量-box 和查看器浏览器窗口的大小。如果要让 div 之间的间距保持一致，则需要去掉绝对定位。

另外，我强烈建议您将 css 从类更改为 id（. 到 #）。您忘记了中间框上的类/id 标记，所以这也可能导致问题。

请记住，内边距会影响 div 的内部，而边距会影响外部。

此代码是否提供了您正在寻找的内容？（我添加背景颜色只是为了视觉效果，这样我就可以看到 div 发生了什么。）

<style type="text/css">
#top-box {
    width: 265px;
    position: relative;
    margin: 0px auto;
    background-color: #DDD;
}
#middle-box{
    margin: 20px 0;
    padding: 20px;
    background-color: #AAA;
}
#bottom-box{
    width: 25%;
    padding: 12px 0 12px;
    bottom: 0px;
    min-width: 300px;
    background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>

如果不知道您打算用这些 div 做什么，就很难知道还能告诉您什么。希望这会有所帮助！

【讨论】：