I have the following piece of HTML page:

```
<div id="main">
    <div id="description">
        Some text
    </div>
</div>

```

With the following CSS:

```
#main {
    height:600px;
    vertical-align:middle;
}

#description {
    display:block;
    height:50%;
    width: 50%;
    margin: auto;
    font-size:18px;
}

```

With this code, `description div` is centered horizontally, but I want to center it vertically.

Do you know how can I do that?