Question

将弹性项目居中很容易。但是我喜欢将它向上移动一点，以便上下空间之间的关系为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/

应用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>

flexbox对齐项目从中心偏移而没有填充

1 个答案: