html - 计算汉堡包对象栏位置

Question

我正在制作这个汉堡包。我正在尝试了解如何通过精确计算来定位条形图，而无需注视它。汉堡高度为 24px所以我假设为了定位中间栏，它应该是高度的一半，所以 12px(top: 12px;) 或示例 0.5em 的情况，但这看起来并不以整个菜单为中心。 (顶部:10px 看起来正确或 0.625em)。

总的来说，在 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 可以做到......不需要定位。

这里有几个选项。

.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>