CSS 基本布局 - 3 个 div + 1 个 div 在另一个内部，居中

Question

我遇到了一个问题，我就是无法理解。我想要三个不同的div，填充整个页面（没有滚动条）和中间的div，另一个div 在它里面水平和垂直居中。我尝试了很多，但总有一些东西在破坏布局。

到目前为止，这是我的代码：

html, body {
background-image: url(images/bg_tile.gif);
background-repeat: repeat;
margin: 0;
padding: 0;
resize:none;
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 14%;
background-color: #09F;
top: 0px;
}
#body_con {
width: 100%;
height: 80%;
background-color: #0CF;
}
#footer {
width: 100%;
height: 6%;
background-color: #09F;
bottom: 0px;
}
#body_image {   
width: 90%;
height: 90%;
margin:0px auto;
background-color: white;
}

我知道，不知何故这是可能的，但我就是无法让它工作。有什么想法吗？

编辑：http://jsfiddle.net/w774g/

谢谢狮子座

Answer 1

您可以设置绝对定位的div 的边缘位置，如下所示：

http://jsfiddle.net/w774g/1/

#header {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 86%;
    background-color: #09F;
}
#body_con {
    position: absolute;
    width: 100%;
    top: 14%;
    bottom: 6%;
    background-color: #0CF;
}
#footer {
    position: absolute;
    width: 100%;
    top: 94%;
    bottom: 0;
    background-color: #09F;
}
#body_image { 
    position: absolute;  
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    background: black;
}

Answer 2

试试这个：

#body_con {
    width: 100%;
    height: 80%;
    background-color: #0CF;
    /* added */
    position: relative;
}
#body_image {
    width: 90%;
    height: 90%;
    margin:0px auto;
    background-color: white;
    /* added */
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

工作小提琴