使用Flex进行垂直对齐可创建水平对齐

Question

我正在使用display：flex来垂直对齐下面的模态div：

    <div class="row vertical-align">
        <div class="col-md-6 col-md-6 col-sm-0 col-xs-0">
            <div class="hidden-xs hidden-sm">
                <img src="images/login-screen.jpg" class="img-responsive">
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            Input Fields here
        </div>
    </div>

以下是使用的css代码。

@media (max-width: 480px) {
.modal-dialog {
    width: 95%;
    height: 95%;
    padding: 0;
}
.modal-content {
    min-height: 95%;
    border-radius: 0;
    height: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column; /* works with row or column */
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
}

垂直对齐效果很好。但是，也存在巨大的水平对齐。我只想要垂直对齐。我错过了什么？我也尝试了以下内容：

    flex-direction: row;