css table-cell和vertical align middle在firefox中不起作用

Question

I am trying to vertically center the contents of .onesizechart, which I have working in bothChrome and Safari, but does not work in either Firefox or IE. The contents of .homepage-sizechart are displaying fine which makes me think I am missing something very simple. Any ideas?

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;
}

Answer 1

You need to set your parent container to display:table; for the child elements using display:table-cell to inherit tabular like properties such as vertical-align .

HTML:

<div class="container">
    <div class="panel">
        hey
    </div>
    <div class="panel">
        hey
    </div>
 </div>

CSS:

.container {
    display:table;
    height:100px;
}
.panel {
    display:table-cell;
    vertical-align:middle;
    border:1px solid red;
}

Although you haven't provided the CSS for the .product-preview-image-div class above, I'm guessing that this is most likely the problem at play.

JSFiddle: http://jsfiddle.net/a4fyg/