I want to center a div which is inside another div.

```
<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

```

This is the CSS I am currently using.

```
    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }

    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

```

As you can see, the approach I use now depends on the width and height of `#innerDiv`. If the width/height changes, I will have to modify the `margin-top` and `margin-left` values. Is there any generic solution that I can use to center the `#innerDiv` independently of its size?

I figured out that using `margin: auto` can horizontally align the `#innerDiv` to the middle. But what about vertical alignment?