问如何将div垂直居中在另一个div内？

<div id="outerDiv">

    <div id="innerDiv">

    </div>

</div>

    #outerDiv{

        width: 500px;

        height: 500px;

        position:relative;

    }

    #innerDiv{

        width: 284px;

        height: 290px;

        position:absolute;

        top: 50%;

        left:50%;

        margin-top: -147px;

        margin-left: -144px;

    }