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

Question

这是我在 stackoverflow 上的第一篇文章（对我来说轻松一点）这可能是一篇冗长的、过度解释的文章。请原谅我，我从来都不善于轻松地表达我的话。

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

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

现在，我的#footer 被锁定在页面底部，即使调整大小也是如此。这是我需要保留的功能。 #imgcont 是我需要垂直和水平对齐的 div。调整大小时，它基本上需要“浮动”在页面中心，而不会与#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 的高度和宽度。例如。

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