让已知宽高的div上下左右居中

html:

<div id="header">
<div></div>
</div>

css:

方法1:

#header{
width:500px;
height:500px;
border:1px solid #000;
}

#header>div{
width:100px;
height:100px;
background-color:#f00;
margin:200px auto;
}

方法2:

#header{
width:500px;
height:500px;
border:1px solid #000;
position:relative;
}

#header>div{
width:100px;
height:100px;
background-color:#f00;
position:absolute;

//让内部div的左上角居中
top:50%;
left:50%;

margin:-50px 0 0 -50px;

}

效果如图所示：