Css vertical alignment with nested divs - css

Question

This question resulted from a fix suggested to this related question
I have 3 nested divs: outer, inner and item.
<div class="outer">
<div class="inner"><div class="item"></div></div>
</div>
Given the following basic CSS:
.outer{
width:50%;
height:100px;
border: 1px solid red;
position:relative;
overflow-x:hidden;
box-sizing:border-box;
}
.inner{
border:1px solid blue;
height:100%;
position: absolute;
box-sizing: border-box;
line-height:98px;
}
.item{
width:100px;
height:94px;
background-color:yellow;
display: inline-block;
border:1px solid green;
box-sizing:border-box;
vertical-align:middle;
}
The challenge is to center the 'item' div vertically with equal (or no) gaps above/below, and no vertical scrollbars appearing.
Codepen here
Update:
As pointed out below, I should add that multiple items of different heights must be centered. The best answer so far is to add a negative margin to each item, resulting in the following: http://codepen.io/anon/pen/dYWEYZ
However, this smells bad (to me) as it requires an offset that depends on 3 other properties.

Answer 1

The simple solution is http://codepen.io/anon/pen/jbmRjo
to add this to your .item class:
margin-top: -5px;
It's because of the borders on your outer and inner classes, as well as the line-height of the inner class. If you make the borders 2px instead of 1px, then the margin top becomes -9px. If you leave borders at 1px and make the line-height 96px the margin top becomes -3px.
So why can't you use a negative margin top?

Answer 2

If you use flexbox, this is easily achieved:
.inner{
border:1px solid blue;
height:100%;
position: absolute;
box-sizing: border-box;
line-height:98px;
display:flex;
align-items:center;
}

Answer 3

You can use display: table-cell; to get the vertical centering you want:
.outer{
width:50%;
height:100px;
border: 1px solid red;
position:relative;
overflow-x:hidden;
box-sizing:border-box;
}
.inner{
border:1px solid blue;
height:100%;
position: absolute;
box-sizing: border-box;
line-height:98px;
display: table; //must change this as well
}
.item{
width:100px;
height:94px;
background-color:yellow;
border:1px solid green;
box-sizing:border-box;
vertical-align:middle;
display:table-cell; //update display type
}