垂直居中在 Mozilla 下不起作用

Question

在 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 下工作？

提前致谢

Answer 1

水平居中：

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

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

绝对是跨浏览器的

编辑：

尝试像这样更改容器 class 样式：

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

Answer 2

您需要使您想要的块垂直对齐 inline 或 inline-block。垂直对齐：中间；不适用于块元素。

垂直居中在 Mozilla 下不起作用

Vertical center doesn't work under Mozilla

html

css

firefox

cross-browser