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

这是我关于stackoverflow的第一篇文章（对我来说很容易），这可能是一篇冗长且过度解释的文章。请原谅我，我从来都不擅长轻易地传达我的观点。

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


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


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

我遇到的问题是在#imgcont div内垂直对齐#main 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在相遇时“锁定”到页眉和页脚，然后保持水平对齐。

任何人都可以请给我任何见识，即时通讯把我的头发拔出来！ :(

我希望我已经对此进行了充分的解释，以使您理解，因为我自己几乎什至都不了解！

提前致谢，
鲍勃

最佳答案

您需要固定车身的高度和宽度。

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