I've successfully managed to vertically center the contents of .onesizechart in Chrome and Safari, but I'm facing issues with Firefox and IE. Interestingly, the contents of .homepage-sizechart are displaying correctly, leading me to believe that I might be overlooking something simple. Any suggestions on how to resolve this?
HTML/Liquid
<div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">
<div class="product-preview-image-div">
<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>
</div>
CSS
.homepage-products {
cursor: pointer;
margin-top: 20px;
}
.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;
}
.onesizechart {
opacity: 0;
position: absolute;
display: table;
width: 90%;
z-index: 999;
top: 5%;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
}
.onesize {
display: table-cell;
vertical-align: middle;
}
.sizes {
position: relative;
}