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;//背景颜色，便于测试查看效果
}