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

Question

在 iE 和 Chrome 中，我的容器 block 很好地垂直居中，但在 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 下工作？

提前致谢

Answer 1

水平居中:

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

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

绝对是跨浏览器的。

编辑:

尝试像这样更改容器类样式:

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