flexbox выравнивает элементы, сдвинутые от центра без наполнителей

Question

Центрирование гибкого элемента легко. Однако мне нравится немного смещать его вверх, чтобы соотношение между верхним и нижним пространством было e. г. 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/

Применение полей margin-top и margin-bottom не работает в процентах относительно ширины.

Answer 1

вместо добавления 2 элементов в разметку, вы можете использовать :before и :after псевдоэлементы:

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