Here is my JSFiddle: [JSFiddle Example](http://jsfiddle.net/rgmybd76/1/)

The problem I'm having is that I can't get my inner div with class `.modal-dialog` to be vertically centered inside its container with class `.modal-container`

I have set the `modal-container` to be a `table-cell`, with `vertical-align: middle` and given it a height of 100% but its not working as I want.

All I want is for the inner div to be vertically centered. The container `modal-container` has to be fixed or absolute positioned because its a modal that sits on top of the rest of the page content. 

Here's the code (CSS then HTML):

```
.modal-container {
    top: 0;
    left: 0;
    position: fixed;
    width: 270px;
    height: 100%;
    z-index: 2000;
    background-color: #000;
    display: table-cell;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: middle;
}
.modal-dialog {
    width: 210px;
    height: 400px;
    margin: auto;
    border: 1px solid white;
}

<div class="modal-container">
    <div class="modal-dialog">
        <form>
            <input name="EMail" type="email" placeholder="Email address" />
            <input name="Password" type="password" />
        </form>
    </div>
</div>

```