CSS对齐：垂直;在Firefox中无法正常工作

Question

我正在尝试垂直居中.onesizechart的内容，我在Chrome和Safari中都使用过，但在Firefox或IE中都无法使用。在Chrome和Safari中，内容显示为悬停，但在Firefox和IE中，当我悬停时，内容会显示如下内容。实时网站是here 不完全确定导致此问题的原因。

HTML /液

<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

试试这个 改变它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;
}