Centering an element (horizontal and vertical) fails in Firefox

[Denizz]

I'm centering some content (both ways) inside a container element using the method Chris Coyier suggested in CSS-tricks. For the sake of compatibility I'm using a semantic approach instead of the \[code\]:before\[/code\] pseudo element used in the article. For some reason Firefox (tested on v.19 for Mac) fails and I can't figure out what the right fix is (whereas Safari, Opera, IE9 and Chrome all work the way they should).I can detect browser and put some conditional rules but I'm interested in fixing this globally if possible.Here's my code from the modified fiddle I created if you wanna check in different browsers.CSS:\[code\].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;}\[/code\]HTML:\[code\]<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>\[/code\]