Firefox中的元素居中（水平和垂直）失败

Question

我使用方法Chris Coyier suggested in CSS-tricks将一些内容（两种方式）集中在容器元素中。为了兼容性，我使用了语义方法，而不是文章中使用的:before伪元素。出于某种原因，Firefox（针对Mac的v.19进行了测试）失败，我无法弄清楚正确的修复方法（而Safari，Opera，IE9和Chrome都按照他们应该的方式工作）。

我可以检测浏览器并放置一些有条件的规则，但如果可能的话，我有兴趣解决这个问题。

这是我的代码the modified fiddle I created如果你想检查不同的浏览器。

CSS：

.block { 
    text-align: center; 
    background: #c0c0c0; 
    margin: 20px 0; 
    height: 300px; 
} 
.content-before { 
    content:''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    padding: 10px; 
    background: #f5f5f5; 
} 

HTML：

<div> 
    <div class="block"> 
     <span class="content-before"></span> 
     <div class="centered"> 
      <h1>Some text</h1> 
      <p>But he stole up to us again, and suddenly clapping 
      his hand on my shoulder, said&mdash;"Did ye see anything 
      looking like men going towards that ship a while ago?"</p> 
     </div> 
    </div> 
</div> 

Answer 1

布局被打破，因为.centered宽度是容器的宽度的100％，并且内联块元素别处理好溢出（并将它们推到下一行）。

尝试设置font-size: 0为.block元素，然后在.centered中重新声明字体大小（比如16px）。它的工作对我来说 - http://jsfiddle.net/teddyrised/hJtpF/4986/

.block { 
    font-size: 0; 
    /* Rest of the styles here */ 
} 
.centered { 
    font-size: 16px; 
    /* Rest of the styles here */ 
} 

美中不足的是，你们必须用的像素值重新声明字体大小 - em单元（这是我个人最常用）将无法正常工作的家长有一个字体大小为0（em是一个相对单位，在这种情况下，em将从父字体大小为0，任何乘以零的参考为零）。

[编辑]：如果你不想使用这个肮脏的黑客，那么你也可以选择确保子项的宽度，.centered不是父容器宽度的100％，这样就有一些剩余空间为空元素.content-before，沿着线的东西：

.centered { 
    box-sizing: border-box; /* So that padding is also taken into account */ 
    width: 90%; 
    /* Rest of the styles here */ 
} 

见捣鼓第二个建议 - http://jsfiddle.net/teddyrised/hJtpF/4988/