Flexbox对齐项目从中心移动而没有填充物

Question

居中一个flex项目很容易。但是，我喜欢向上移动一点，以使上下空间之间的关系是e。G。1/2。使用填充剂时也很容易。但是有没有办法做这个填充物？html：

<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>

CSS：

    #the-item {
        width: 80vw;
        height: 30vh;
        border: 2px solid lightblue;
      }
      body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
      #filler-top {
        width: 100%;
        flex: 1;
      }
      #filler-bottom {
        width: 100%;
        flex: 2;
      }

https://jsfiddle.net/sempervivum/b2wotc8e/3/

应用保证金顶和边距底部不起作用，因为百分比相对于宽度。

Answer 1

，而不是在标记中添加2个元素，您可以使用 :before和 :after pseudo elements：

#the-item {
  width: 80vw;
  height: 30vh;
  border: 2px solid lightblue;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
body:before {
  content: "";
  width: 100%;
  flex: 1;
}
body:after {
  content: "";
  width: 100%;
  flex: 2;
}

<div id="the-item"></div>

另一种选择是简单地使用position:relative，top和transform的混合物：

#the-item {
  width: 80vw;
  height: 30vh;
  border: 2px solid lightblue;
  position: relative;
  top: 33.333%;
  transform: translateY(-33.333%);
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

<div id="the-item"></div>