编写css让一个已知宽高的div元素水平居中？垂直居中

让一个已知宽高的div元素水平居中

<style>
#div1{
width:200px;
height:200px;
background:#F00;

margin:0 auto;
}

</style>
</head>

<body>
<div >

</div>
</body>
</html>

让一个已知宽高的div元素垂直居中

<style>

#div1{
width:300px;
height:200px;
background:#F00;
position:absolute;
top:50%;

margin-top:-100px;

}

</style>
</head>

<body>
<div >

</div>
</body>
</html>