html - 没有固定大小的容器中的垂直和水平居中文本在 Firefox 中表现得很奇怪

Question

在实现垂直居中时遇到一些麻烦。 似乎在 Chrome 和 Safari 中正常工作，但在 Firefox 中它的行为很奇怪(我在 Mac 上调试)。

当调整浏览器大小时，悬停元素的大小不会调整以适合其父元素，而当浏览器调整为原始宽度时，悬停元素最终会变得太小。

参见 this video
这里是 demo . (Link 到代码 View )

关于如何解决这个问题有什么想法吗？

Answer 1

最终我能够通过这些更改解决这个问题。
希望它能在将来对某人派上用场(链接到答案底部的完整解决方案)。

原始标记

<article class="work-preview">
    <img src="http://lorempixel.com/output/nightlife-q-c-600-414-6.jpg">
    <div class="covering background"></div>
    <div class="covering foreground">
            <h2>A Text</h2>
    </div>
</article> 

新标记

<article class="work-preview">
        <img src="http://lorempixel.com/output/nightlife-q-c-600-414-6.jpg">
        <div class="coveringcontainer">
            <div class="covering foreground">
                <h2>A Text</h2>
            </div>
        </div>
</article> 

原始 CSS

.covering {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
}

body .work-preview:hover .covering {
    opacity: 1;
    filter:alpha(opacity=100);
    cursor: pointer;
}

新 CSS

.coveringcontainer {
  position: absolute;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
}

.work-preview:hover .coveringcontainer {
  display: block;
  cursor: pointer;
}

.covering {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
}

这是 solution完整!