Question

如何正确居中#content而不会溢出#container？ margin: auto有点起作用，但看起来像是黑客，我不想在CSS Flexbox中使用任何边距。

请注意，#container有position: fixed。

以下代码演示了该问题： [View in JSFiddle ↗]

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /* margin: auto */
}

<div id="container">
  <div id="content">
  </div>
</div>

您可以通过取消注释margin: auto来检查所需的行为，问题是如何仅使用flex-属性并且不使用margin: auto来获得相同的结果。

Answer 1

如果内容超出了灵活容器，则在没有标记更改的情况下，您不能像使用align-items: center时那样设计overflow in both directions。

<强> “中心”
弹性项目的边距框在十字轴内居中这条线。（如果柔性线的交叉尺寸小于弹性项目，它会在两个方向上均匀溢出。）

另请注意，auto margins在Flexbox中具有特殊含义，并且不是一个黑客，恰恰相反，所以在这种情况下，它们是基于flex的解决方案，可以完全实现这一点。

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  overflow: auto;
}

#content {
  border: 1px solid green;
  margin: auto;
}

<div id="container">
  <div id="content">
  </div>
</div>

Answer 2

试试这个。我已经取了一个content个ID的父div，并将height:100vh提供给content_wrap课程。

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /*margin: auto ;*/
}
.content_wrap  {
  height: 100vh;
}

<div id="container">
  <div class="content_wrap">
    <div id="content">
    </div>
  </div>
</div>

Answer 3

只需将align-items: center;替换为您的css中的align-items: left;

因为你正在使用flex而且align-items: center; div正在从中心部分显示，所以只需用左替换它。

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: flex;
  /*align-items: center;*/
  align-items: left;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /* margin: auto */
}

<div id="container">
  <div id="content" class="mx-auto">
  </div>
</div>

Answer 4

您可以将position的{{1}}设置为#content并在样式中设置absolute，此处为plunkr

CSS Flexbox：一个居中的子节点溢出父位置固定

4 个答案: