使用CSS垂直对齐div中的表单元素

Question

我正在使用jade来模拟我的网站。吼叫是玉模板和css。我希望表单元素在其父div

中居中

layout.jade

doctype html
html 
    head 
        title #{title} - My Site 
        link(rel='stylesheet', href='/stylesheets/style.css') 
    body 
        .main-wrapper
            .header
                include main-header
            .main-container
                block contents
            .footer
                include main-footer

index.jade

extend layout
block contents
    form(action='/login', method='post')
        div
            |Username:
            input(id='username', type='text', value='', name='username')
        div
            |Password:
            input(id='password', type='password', value='', name='password')
        div
            input(type='submit', value='Login', data-transition='fade')

CSS

/*
 * Grab a custom font from Google
 */
@import url("http://fonts.googleapis.com/css?family=Quicksand");

html{
    height: 100%
}

body{
    height: 100%
}

.main-wrapper {
    height: 100%    
}

.header {
    font-family: 'Quicksand';
    text-align: center;
    background-color: #fa5b4d;
    font-size: 50px;
}

.footer {
    font-family: 'Quicksand';
    text-align: center;
    background-color: #fa5b4d;
}

.main-container {
    text-align: center;
    background-color: #E47620;
    height: 100%;
    width: 100%
}

.main_container form{
    vertical-align: middle;
}

由于某种原因，表单元素不在其父div的中心，任何想法为什么？