"Vertical-Align: Middle" Does Not Align to the Middle in Firefox

vertical-align: middle does not align to the middle in Firefox

Vertical align only works as expected on table cells or display: inline-block elements. If you want more information I suggest you read Understanding vertical-align, or "How (Not) To Vertically Center Content".

Edit: You've got something else going on because that works for me as is on Firefox. I even dropped the font size of SECTION: right down and it's still centered. Have you used Firebug to see what other CSS is affecting it?

This works as is:

<html>
<head>
<style type="text/css">
div.categoryLinks {
        margin: 1em 16px;
        padding: 0 4px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #ece754;
        background: #f7f5b7;
        color: #a49f1c;
        text-align: center;
        font-size: 1.4em;
}
div.categoryLinks em {
        font-size: 0.4em;
        font-style: normal;
        vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
        <em>SECTION:</em>
        Page One ·
        Page Two ·
        <a href="link">Page Three</a>
</div>
</body>

Note: section font size changed to 0.4em from original 0.6em to emphasize the point.

Cannot align the innerHTML of a span vertically in Firefox

You are doing all right. Font metrics of BrownStd cause this issue. The distance from symbol baseline to bottom of font content area is bigger than distance to top.
Not sure you can perfectly align text and icon without some tricks like negative margins or absolute positioning.
You can read this article about font metrics, it's pretty hard to understand.

button {  display: inline-flex;  align-items: center;    padding: 10px;  height: 50px;  border: 1px solid;}
div {  margin-right: 10px;  width: 25px;  height: 25px;  background-color: red;  border-radius: 50%;}
span {  background-color: blue;  font-family: sans-serif;  color: white;}

<h1>Nice font —</h1>
<button>
  <div></div>  <span>nice vertical alignment</span>
</button>

Vertical center doesn't work under Mozilla

Horizontal centering:

For the object you need to center just use the following:

display: block;
margin-left: auto;
margin-right: auto;

It is absolutely cross-browser.

Edit:

Try to change container class styles like this:

.container{
    height: 100%;
    display: table;
    vertical-align: middle;
    background: green;
}

CSS, vertical alignment doesn't correctly work in Mozilla Firefox

Have a look at working demo here: Demo

#contentWrapper{
    width: 100%;
    position: static; 
    display: table; 
    overflow: hidden; 
    min-height: 100%;
    height: 100%;
    background: red;
}

This is working fine in Firefox . Is this what you are looking for?

text vertical align in select box - firefox issue

You may try this

padding:.3em;/.4em;

depending on your configuration.

Vertical alignment of table cell element in Firefox doesn't work

I resolved replacing

vertical-align: middle;

with

padding-top: 50%;

This works on both browsers!

"Vertical-Align: Middle" Does Not Align to the Middle in Firefox