如何在可滚动容器中的CSS中垂直居中放置元素

Question

我正在尝试使用css在父元素内部垂直居中放置一个元素。 父元素具有动态高度，如果父元素的高度小于子元素的高度，我希望父盒子滚动。 我尝试使用弹性盒和transform：此处描述的翻译技术（ https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ ）使孩子居中。 两种技术都有效，但是当父级太小时会导致奇怪的滚动行为。

#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
position: absolute;
}

.center {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

这是一个显示我的意思的jsfiddle： http : //jsfiddle.net/snhpdL91/

请注意，如果将窗口缩小，直到滚动条出现，即使滚动到最顶部，子项顶部的文本“ hello”也会被截断。 我该如何做才能在子元素的整个范围内滚动？

Answer 1

您可以将flexbox与auto边距一起使用：

在通过justify-content和align-self之前，任何正的自由空间都会分配给该维度中的自动边距。

之所以有效，是因为仅分配了正的自由空间。

#wrapper {
  display: flex;
}
.center {
  margin: auto;
}

 #wrapper { top: 0; bottom: 0; left: 0; right: 0; overflow: auto; position: absolute; display: flex; } .center { width: 300px; height: 300px; background-color: yellow; margin: auto; } 

 <div id="wrapper"> <div class="center">Hello</div> </div>