flex容器内的居中元素正在增长并溢出顶部[重复]

Question

我一定是忘记了垂直和水平居中的弹性框的一些基本内容。

容器在垂直滚动的父级内，当容器变得太高时，它会超出父级顶部，从而剪裁内容。底部保持不变。

尝试调整视图的高度或添加更多行以查看它的实际效果。

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

#wrapper {
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}

#box {
  margin: 30px 0;
  background: white;
  border: 1px solid #dfdfdf;
}

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>

如何防止它被剪掉？此外，我试图在容器上方和下方留出 30 像素的边距。

谢谢！

Answer 1

我认为您在扩展容器高度的盒子类中设置了上边距。您可以将其设置为填充而不是边距。希望这可以帮助。谢谢。

Answer 2

我认为你想要的是让你的弹性项目 (#box) 有一个高度并将其设置为溢出，而不是弹性容器。另外，要在上方和下方添加 30px，我会从框中删除边距，而是向容器添加填充。

因此，更新后的样式如下所示：

#wrapper {
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;      
  align-items: center;
  justify-content: center;
  padding: 30px 0; /*added*/
}

#box {
  background: white;
  border: 1px solid #dfdfdf;
  overflow-y: auto; /*added*/
  height: 100%; /*added*/
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

#wrapper {
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;      
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

#box {    
  background: white;
  border: 1px solid #dfdfdf;
  overflow-y: auto;
  height: 100%;
}

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>

Answer 3

您什么都没忘记，但您只需要了解正在发生的事情。首先，您将包装器设置为 100% 的屏幕高度，然后将框设置为垂直和水平居中。当盒子的高度很大时，你会得到这样的东西：

现在，当您添加overflow-y: auto 时，您将创建一个从包装器顶部 开始直到底部溢出内容的滚动。所以它会是这样的：

这就是为什么您可以滚动到底部以查看底部而无法看到顶部的原因。

为避免这种情况，请使用margin:auto 将元素居中，在这种情况下，我们将有两种情况：

1. 当box-height < wrapper-height 时，由于margin:auto，我们将在每一侧都有空间平均分布，因此您的元素将像预期的那样居中。
2. 当box-height > wrapper-height 时，我们将有正常行为，您的元素将溢出，并且他的顶部边缘将粘在包装器的顶部边缘。

您可能还注意到水平方向也会发生同样的情况，这就是为什么我将使用边距在两个方向上居中。

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

#wrapper {
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  padding:30px 0;
  display: flex;
  overflow-y: auto;
}

#box {
  margin: auto;
  background: white;
  border: 1px solid #dfdfdf;
}

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>