html - 绝对位置不起作用

Question

如何将 div #gallery 设置在 div #warp 的中心？这是一个demo JS Fiddle .

HTML:

<div id="warp">
    <div id="header">
        <img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
        <img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
        <div id="menu">
            <li><a href="#"  title="About Us">About Us</a>
            <li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
            <li><a href="#" name="profile"  title="Profile" > Profile</a></li>
        </div>    
    </div>

    <div id="gallery"></div>
</div>

CSS:

html body{
    margin:0;
    padding:0;
}

body{
    background:#F7F7F7;
}

#warp{
    position:relative;
    margin:0 auto;
}

#header {
        position:relative;
        background:#DEEAF4;
        width:80%;
        height: 100px;
        margin:0 auto;

    }
#logo_l{
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;

}

#Logo_r{
    position:absolute;
    width:272px ;
    height:100px;
    right:0;
    top:0;
    margin:0;
    padding:0;

}    

#menu li {
    display: block;
    vertical-align: top;
    float:left;
    margin: 0 5px;
    }

#menu {
    position:relative;
    width:250px;
    top: 35px;
    margin: 0 auto;

    }
#gallery{
    position:absolute;
    background:#EBF0F5;
    width:80%;
    height:70%;
    margin:10px auto;
    padding:10px;
}    
​

Answer 1

您不需要包含 position: absolute到中心#gallery .这已经通过 margin: 10px auto 实现了.

进一步，将百分比高度设置为#gallery , 它的父元素必须有特定的高度。在这种情况下，我假设您希望它基于视口(viewport)高度。为此，每个祖先 div 的高度都必须为 100%:

*, html, body, #warp {
    height: 100%;
}

JS fiddle :http://jsfiddle.net/qc9WL/1/

注意:我还注意到您的 HTML 和 CSS 中存在一些错误。

• body 之间需要一个逗号和 html在你的样式表的第一行
• 你应该使用<ul>或 <ol>制作 list 时的标签
• 最后，不要忘记关闭您的 <li>在第六行