一个盒子相对于另一盒子垂直居中的方法

html结构：

<div id="wrap">

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

</div>

css样式：

方法一：

#box{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        background: red;
        margin: -100px 0 0 -100px;            
    }

方法二：

#box{
        position: absolute;            
        width: 200px;
        height: 200px;
        background: red;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

方法三：

#box{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        background: red;
        margin: -100px 0 0 -100px;
        transform: translate(-100px,-100px);
        -webkit-transform: translate(-100px,-100px); //兼容webkit浏览器
        -moz-transform: translate(-100px,-100px);//兼容moz浏览器
    }