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

时间:2014-02-21 11:35:36

标签: css html center

我遇到了一个问题,我无法理解。 我想要三个不同的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/

谢谢你, 利奥

2 个答案:

答案 0 :(得分:3)

您可以设置绝对定位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;
}

答案 1 :(得分:1)

试试这个:

#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%;
}

Working Fiddle