Vertical center doesn't work under Mozilla - html

Question

In iE and Chrome my container block is well vertically centered but not in Firefox. I don't understand because all the parent are well defined so it would be ok under every browser. Maybe there is a special toolkit under Mozilla for that kind of CSS but i didn't find it .
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">
<img src={{ asset('images/icones/buy_button.png') }} alt="buy_button" id="buy_button"class="img-rounded img-responsive">
</div>
<div class="col-xs-6">
<img src={{ asset('images/icones/sell_button.png') }} alt="sell_button" id="sell_button" class="img-rounded img-responsive">
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Applied 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;
}
}
So, my question is how to make it work under Mozilla Firefox?
Thanks in advance

Answer 1

Horizontal centering:
For the object you need to center just use the following:
display: block;
margin-left: auto;
margin-right: auto;
It is absolutely cross-browser.
Edit:
Try to change container class styles like this:
.container{
height: 100%;
display: table;
vertical-align: middle;
background: green;
}

Answer 2

You need to make the blocks you want aligned vertically inline or inline-block. vertical-align: middle; does not work on block elements.