html - 垂直对齐和水平对齐

Question

我正在尝试对齐一个盒子的 VxH 中心，但我似乎有点偏离它:

HTML:

<div id="wrapper">
        <header>
            <div id="logoWrapper">
                <div class="logo">Logo Here </div><!-- Logo End -->
            </div><!-- Logo Wrapper -->
    </header>
</div><!-- Wrapper End -->

CSS:

![#wrapper{
    width:955px;
    margin:auto;
}

html body{
    background:#F1FF29;
}

#logoWrapper{
    width:429px;
    height:179px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
}
.logo{
    display:block; 
    background:red;
    width:429px;
    height:179px;
}]

图片:http://i.stack.imgur.com/rZ2ng.png

Answer 1

将 #logoWrapper 的边距更改为这些值:

margin-left:-215px;
margin-top:-85px;

它们需要是 Logo 宽度和高度的一半。

jsfiddle

编辑:

此外，我建议您将这些“重置”样式放入:

html, body{
    background:#F1FF29;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}