Calculating hamburger object bar position - html

Question

I have this hamburger I'm creating. I'm trying to understand how to position the bars with precise calculation without eyeballing it. The hamburger height is 24px
so I would assume in order to position the middle bar it would be half the height so 12px(top: 12px;) or incase of the example 0.5em but that doesn't look centered to the overall menu. (top: 10px looks right or 0.625em).
Overall whats a better way to calculate anything in css?
http://codepen.io/anon/pen/Bjjqez
<div class="hamburger">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
SASS
.hamburger {
position: relative;
width: 3em;
height: 1.5em;
cursor: pointer;
div {
background-color: red;
position: absolute;
width: 100%;
height: .25em;
}
&__top {
top: 0;
}
&__middle {
background-color: green;
top: 0.5em;
}
&__bottom {
bottom: 0;
}
}

Answer 1

Flexbox can do that....no positioning required.
Here's a couple of options.
.hamburger {
width: 3em;
height: 1.5em;
cursor: pointer;
display: flex;
flex-direction: column;
margin: 1em auto;
}
.hamburger div {
background-color: red;
height: .25em;
}
.around {
justify-content: space-around;
background: lightblue;
}
.between {
justify-content: space-between;
background: lightgreen;
}
<div class="hamburger around">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
<div class="hamburger between">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>

Answer 2

Replace your top: 0.5em with:
top: 50%;
transform: translateY(-50%);
From my understanding of how this works, the top: 50% will move the top of the element to be half way down. The translateY(-50%) will then move the element up by half it's own height, and therefore centrally position it.
Example: http://codepen.io/anon/pen/RrrqWP