Question

我需要将一个（嵌套的）元素与其容器元素的垂直中心对齐，但是当嵌套的元素变得比容器高时，容器需要从嵌套内容的顶部开始滚动（没有超出顶部）。

我一直在寻找一个快速的解决方案，但是无论我在哪里，我的搜索结果中都会遇到很多噪音。

理想情况下，该解决方案将使用Flexbox，但任何和所有解决方案都可以使用，只要它们在所有目标浏览器中都可以使用。

这需要在IE 11，Edge和Firefox，Chrome和Safari的当前版本中工作。

请在将其标记为重复之前，确保类似的问题对于相同的目标浏览器具有明确的解决方案。阅读关于所见解决方案的评论后，我发现它们不适合我的用例。

这是我尝试过的一件事，但是嵌套的内容保持居中，并超出了容器的上下边界，而不是在太高时滚动而不显示：

<div class="float-container">
  <div class="float-content">
    <!-- Some content that changes height -->
  </div>
</div>

.float-container {
  margin-top: 50px;
  height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

Answer 1

您可以尝试margin:auto

.float-content {
    margin: auto;
    overflow:auto;
}

https://jsfiddle.net/m4tsudc7/3/

Answer 2

尝试以下代码：

.float-container{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  height: calc(100vh - 100px);
  overflow-y:auto;
  }
.float-content{
margin:auto
}

<div class="float-container">
  <div class="float-content">
    Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page.
<!-- Some content that changes height -->
  </div>
</div>

您可以使用transform: translate(-50%,-50%);

    .float-container{
      height: calc(100vh - 100px);
      overflow-y:auto;
      }
     .float-content  { 
    width:100%
  transform: translate(-50%,-50%);
  }

<div class="float-container">
      <div class="float-content">
        Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page.
    <!-- Some content that changes height -->
      </div>
    </div>

将元素与垂直中心对齐（中间），但比容器高时滚动（从元素顶部）

2 个答案: