<p>在尝试使用flexbox创建一个有用的模态框时，我发现了一个似乎是浏览器问题的情况，并想知道是否有已知的修复方法或解决方法 - 或者对如何解决它有什么想法。</p> <p>我试图解决的问题有两个方面。首先，垂直居中模态窗口，这个功能按预期工作。第二个是让模态窗口滚动 - 外部滚动，所以整个模态窗口滚动，而不是其中的内容（这样你可以有下拉菜单和其他可以超出模态框范围的UI元素 - 如自定义日期选择器等）。</p> <p>然而，当将垂直居中与滚动条结合使用时，模态框的顶部可能变得无法访问，因为它开始溢出。在上面的示例中，您可以调整大小以强制溢出，在这样做时，它允许您滚动到模态框的底部，但无法滚动到顶部（第一段被截断）。</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Optional support to confirm scroll behavior makes sense in IE10 //-ms-flex-direction: column; //-ms-flex-align: center; //-ms-flex-pack: center; */ height: 100%; } .modal-container .modal-window .modal-content { border: 1px solid #ccc; border-radius: 4px; background: #fff; width: 100%; max-width: 500px; padding: 10px }</pre> <pre class="brush:html;toolbar:false;">&lt;div class="modal-container"&gt; &lt;div class="modal-window"&gt; &lt;div class="modal-content"&gt; &lt;p class="p3"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt; &lt;p class="p3"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt; &lt;p class="p3"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p><br /></p> <p>这影响（当前的）Firefox，Safari，Chrome和Opera。有趣的是，在IE10中，如果您取消注释IE10供应商前缀的CSS，它的行为确实是正确的 - 我还没有在IE11中进行测试，但假设行为与IE10相匹配。</p> <p>这是示例代码的链接（高度简化）</p> <p>https://jsfiddle.net/dh9k18k0/2/</p>

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

#flex-container {
    align-items: center;
    justify-content: center;
}

.flex-item {
    margin: auto;
}

justify-content: safe center

align-self: safe center