html - Firefox 中不显示绝对居中的图像

Question

这是我建立的第一个综合网站，所以如果我遗漏了任何明显的内容，我深表歉意。

我正在尝试将可变高度和宽度的图像在高度也可变的容器中垂直和水平居中。这样客户端就可以替换图像或更改最终控制高度的相邻 div 中的内容。

我正在使用绝对居中，如 this article 中所述以及它引用的其他人。

它在 Chrome 和 Safari 中运行良好，但 Firefox 不显示图像。在无休止地修补和寻找问题之后，我举起了手。我知道还有其他垂直居中的解决方案，但这似乎是唯一可以处理所涉及的大多数元素的可变性的解决方案。

任何建议的 css/html 更改都将不胜感激。发生这种情况的实际站点是 here .

<div class="partner_section">
        <div class="partner_details">
            <div class="span_2 float-right">
                <h4>Heading</h4>
                    <p>content</p>
                <h4>Heading</h4>
                    <p>Content</p>
                <div class="partner_cta">
                    <a href="/canvas-shoes/black/">CTA</a>
                </div>
            </div>
            <div class="span_2 float-left pImageContainer">
                <a href="http://springboardcollaborative.org/"><img class="" alt="SpringBoard Logo" src="/templates/__custom/images/custom/sblogo.png"></a>
                </div>
            </div>
        </div>
</div>

---

 .partner_section {
   width: 100%;
   overflow: hidden;
   position: relative;
   padding: 40px 0 40px 0;
   z-index: 100;
 }

 .partner_details {
   overflow: auto;
   width: 980px;
   margin: auto;
   position: relative;
   height: 100%;
   display: table;
  }

 .pImageContainer {
   height: 100%;
   overflow: auto;
   text-align: center;
   position: relative;
  }

 .pImageContainer img {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   margin: auto;
 }

 .span_2 {
    width: 49%;
 }

 .float-right {
    float: right;
 }

 .float-left {
    float: left;
 }

Answer 1

在 Firefox 中，错误是 .pImageContainer 上的 height: 100% 和 overflow: auto。因为里面的元素是 position: absolute，容器折叠到 0 高度，元素被隐藏。

删除 overflow: auto 只允许看到图像，但容器的高度不正确，因此它实际上没有居中。

如果您在任何容器上声明了固定高度(例如 250px)，那么它会正常工作，因为 height: 100% 会有一个正确的值。

或者，您可以为 .pImageContainer 指定一个 min-height 值，以确保图像始终显示并居中于该区域内。

示例: http://codepen.io/shshaw/pen/lFbHs