html - 在中心垂直和水平对齐 DIV，而不重叠页眉和页脚

Question

这是我在 stackoverflow 上的第一篇文章(对我放轻松)这可能是一篇冗长且解释过度的文章。请原谅我，我向来不擅长轻易地表达我的话。

基本上，我的页面包含 5 个 div...

• #wrap - 包含所有其他元素
• #header - 标题
• #main - 这包含#imgcont div
• #imgcont - 这包含一个图像
• #footer - 页脚

现在，我的 #footer 被锁定在页面底部，即使调整大小也是如此。这是我需要保留的功能。 #imgcont 是我需要垂直和水平对齐的 div。在调整大小时，它基本上需要“ float ”在页面的中心，而不会与 #header 和 #footer 重叠或重叠。

我遇到的问题是在 #main div 中垂直对齐 #imgcont div，而不使其与 #header 重叠或欠重叠> 和 #footer。我现在使用的代码是:

html, body {height: 100%;}
#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 100px;
}  /* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear: both;
    background-color: #999;
} 
#header {
    height: 100px;
    background-color: #999;
}

/*Opera Fix*/
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}
#imgcont {
    width: 1000px;
    height: 300px;
    background-color: #FC3;
    margin: auto;
}

显然，这只会使我的 #imgcont 水平对齐，但我确实在互联网上找到了一个代码，当窗口全尺寸或大于 # 的高度时，它可以使效果起作用imgcont...

#imgcont {
    width: 1000px;
    height: 300px;
    background-color: #FC3;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

...但是当窗口变小时，#imgcont 开始与 #header 重叠并低于 #footer。

我需要 #imgcont 在页眉和页脚相遇时“锁定”它们，然后保持水平对齐。

任何人都可以提供任何见解，我把我的头发拉出来了! :(

我希望我已经解释得足够好，让你能理解，因为我自己都几乎不明白!

提前致谢，鲍勃

Answer 1

您需要固定正文的高度和宽度。例如。

.body {   
height: 900px;
width: 1000px;
 }