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;//背景顏色，便於測試查看效果
}