Navigation Trouble

HTML

<div class="outer-frame">
    <div class="nav-frame">
        <div class="nav-cell">
            <div class="nav-icon">&#127968;</div>
        </div>
        <div class="nav-cell">
            <div class="nav-icon">&#128138;</div>
        </div>
        <div class="nav-cell">
            <div class="nav-icon">&#127915;</div>
        </div>
    </div>
</div>

CSS

/* box around everything */
 .outer-frame {
    position: relative; /* origin for absolute pos'ed children */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12pt;
    width: 200px;
    height: 190px;
    border: 1px solid #f0f0f0;
    background-color: #fafafa;
}
/* grey area to the left */
 .nav-frame {
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    width: 36px;
    height: 100%;
    background-color: grey;
}
/* the outer container of the icon */
 .nav-cell {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 36px;
    height: 38px;
    background-color: yellow;
    margin-top: 4px;
}
/* the inner container of the icon */
 .nav-icon {
    display: block;
    background-color: white;
    border: 1px solid orange;
    width: 18px;
    height: 24px;
    text-align: center;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

JavaScript

/*
The outer-frame defines width+height of the whole area.

The nav-frame is the grey area to the left. It has an absolute width and a relative height.

The nav-cell is the yellow outer container of a cell.

The nav-icon is the white area. It is supposed to be both horizontally and vertically centred. IT ISN'T VERTICALLY CENTRED, WHY NOT?

The icon itself (pure Unicode text) is supposed to be centred in its parent, nav-icon, overlapping it. THIS ISN'T THE CASE EITHER, WHY NOT?
*/