css div垂直水平居中实现

比如设置html中下面的div为垂直水平居中，则

<div id="box"></div>

css样式

#box{    width: 300px;    height: 200px;    margin-left: -150px;//宽度的一半，很重要，不然不居中，会偏右    margin-top: -100px;//高度的一半    position: absolute;//绝对定位方式    top: 50%;    left: 50%;    background-color: aqua;//背景颜色，便于测试查看效果}