Take all the height declarations off: an item set to display: table-cell
as a child of some element set to display: table
should always be 100% height of its parent.
You also have display: block
and display: table-cell
on the same element. Even though the display: table-cell
will take precedence (because it's last), you should try and keep your code clean.
The code below works in Firefox for me:
HTML:
<div>
<a href="#">test</a>
</div>
CSS:
div { display: table; height: 100px; border: 4px solid #000; width: 300px;}
a { display: table-cell; border: 4px solid #0f0; vertical-align: middle; text-align: center; }