CSS align:vertical; not working properly in Firefox - html

Question

I am trying to vertically center the contents of .onesizechart, which I have working in both Chrome and Safari, but does not work in either Firefox or IE. In Chrome and Safari the contents displays like so on hover but in Firefox and IE the contents display like this when I hover . The live site is here Not exactly sure what is causing this.
HTML/Liquid
<div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.title | escape }}" />
</a>
{% assign contains_os = false %}
{% for variant in product.variants %}
{% if variant.title contains 'OS' %}
{% assign contains_os = true %}
{% endif %}
{% endfor %}
{% if contains_os %}
<div class="onesizechart">
{% for variant in product.variants %}
{% if variant.inventory_quantity == 0 %}
<img src="{{ 'onesize-triangle-outofstock.png' | asset_url }}"/>
{% else %}
<img src="{{ 'onesize-triangle.png' | asset_url }}"/>
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="homepage-sizechart">
<div class="sizes">
{{ 'size-triangle.png' | asset_url | img_tag }}
{% for variant in product.variants %}
<span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %} {% if variant.title contains 'OS'%}hide{% endif %}">{{ variant.title }}</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
CSS
.homepage-products {
cursor: pointer;
margin-top: 20px;
}
.onesizechart {
opacity: 0;
position: absolute;
display: table;
width: 90%;
z-index: 999;
top: 5%;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
}
.homepage-sizechart {
bottom: 0;
display: table-cell;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 5%;
vertical-align: middle;
width: 90%;
z-index: 999;
}
.sizes {
position: relative;
}

Answer 1

Try this
change it display: inline-block; top: 30%;
.onesizechart {
opacity: 0;
position: absolute;
display: inline-block;
width: 90%;
z-index: 999;
top: 30%;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
}