html - 垂直中心在Mozilla下不起作用

在iE和Chrome中，我的容器块垂直居中放置，但是在Firefox中却没有。我不明白，因为所有父项的定义都很好，因此在每种浏览器下都可以。也许Mozilla下面有一个特殊的工具箱，用于那种CSS，但是我没有找到它。

index.html.twig

{% block body %}

<div class="container">
    <div class="vertical-center-row">
        <div align="center">
            <div class="col-md-6 col-md-offset-3">
                <div class="col-xs-6">
                    <a href="{{ path('search_advert') }}">  <img src={{ asset('images/icones/buy_button.png') }} alt="buy_button" id="buy_button"class="img-rounded img-responsive"></a>
                </div>
                <div class="col-xs-6">
                    <a href="{{ path('sell_advert') }}">  <img src={{ asset('images/icones/sell_button.png') }} alt="sell_button" id="sell_button" class="img-rounded img-responsive"></a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

应用CSS：

html,body{
    height: 100%;
}

body {
    margin: 0;
    background: url('../../../../images/pictures/home_background.jpg');
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    padding-top: 6%;
    overflow: hidden;
}


/*general*/

#toHide{
    display: none;
}


/*center*/

.container{
    min-height: 100%;
    height: auto;
    display: table;
    vertical-align: middle;

}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

/* footer*/

#general-navbar{
    height: 6%;
}
#wrap{
    height: 94%;
}

#footer {
    background-color: #f5f5f5;
    height: 6%;
}
#footer-container{
    background-color: #f5f5f5;
    height: 100%;
    width:100%;
}

#clean-footer{
    clear:both;
}
.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;
    height: 100%;
    max-height: 100%;
    margin-right: -100000px;
    padding-right: 100000px;
}

/* responsive design*/

@media only screen and (max-width: 600px) {
    body {
        /* The file size of this background image is 93% smaller
           to improve page load speed on mobile internet connections */
        background: url('../../../../images/pictures/home_background.jpg');
        padding-top: 6%;
    }
    .hide-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .viewport {
        margin-right: -600px;
        padding-right: 600px;
    }

    body {
        overflow: visible;
    }


}

因此，我的问题是如何使其在Mozilla Firefox下工作？

提前致谢

最佳答案

水平居中：

对于您需要居中的对象，只需使用以下命令：

display: block;
margin-left: auto;
margin-right: auto;

绝对是跨浏览器。

编辑：

尝试更改容器类样式，如下所示：

.container{
    height: 100%;
    display: table;
    vertical-align: middle;
    background: green;
}

关于html - 垂直中心在Mozilla下不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32681986/