好吧，正如墨菲定律所言，我在提出这个问题后所做的阅读产生了一些结果——虽然没有完全解决，但还是有些有用的。

在发布之前，我对最小高度进行了一些研究，但没有意识到内在的大小限制，这对规范来说是相当新的。

http://caniuse.com/#feat=intrinsic-width

向flexbox区域添加min-height: min-content确实解决了Chrome中的问题，使用供应商前缀也可以修复Opera和Safari，但Firefox仍然没有解决。

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

还在寻找关于Firefox的想法，以及其他潜在的解决方案。

这个问题

Flexbox使定心非常容易。

通过简单地将align-items: center和justify-content: center应用到伸缩容器，您的伸缩项将垂直和水平居中。

但是，当伸缩项大于伸缩容器时，此方法存在一个问题。

如问题中所述，当伸缩项溢出容器时，顶部将无法访问。

对于水平溢出，左侧部分变得不可访问(在RTL语言中是右侧部分)。

下面是一个例子，一个LTR容器有justify-content: center和三个flex项:

关于这种行为的解释，请参阅答案的底部。

---

解决方案1

要解决这个问题，使用flexbox auto margin，而不是justify-content。

使用自动边距，溢出的伸缩项可以垂直和水平居中，而不会失去对其任何部分的访问。

因此，在flex容器上的代码不是这样的:

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

在flex项目上使用以下代码:

.flex-item {
    margin: auto;
}

修改后的演示

---

解决方案#2(大多数浏览器尚未实现)

将安全值添加到关键字对齐规则中，如下所示:

justify-content: safe center

or

align-self: safe center

从CSS框对齐模块规范:

4.4. Overflow Alignment: the safe and unsafe keywords and scroll safety limits When the [flex item] is larger than the [flex container], it will overflow. Some alignment modes, if honored in this situation, may cause data loss: for example, if the contents of a sidebar are centered, when they overflow they may send part of their boxes past the viewport’s start edge, which can’t be scrolled to. To control this situation, an overflow alignment mode can be explicitly specified. Unsafe alignment honors the specified alignment mode in overflow situations, even if it causes data loss, while safe alignment changes the alignment mode in overflow situations in an attempt to avoid data loss. The default behavior is to contain the alignment subject within the scrollable area, though at the time of writing this safety feature is not yet implemented. safe If the size of the [flex item] overflows the [flex container], the [flex item] is instead aligned as if the alignment mode were [flex-start]. unsafe Regardless of the relative sizes of the [flex item] and [flex container], the given alignment value is honored.

注意:盒子对齐模块用于跨多个盒子布局模型，而不仅仅是flex。所以在上面的规范摘录中，括号中的术语实际上是说“对齐主题”，“对齐容器”和“开始”。我使用特定于flex的术语来关注这个特定的问题。

---

MDN的滚动限制说明:

Flex item considerations Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge [...], as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

我想我找到解决办法了。它适用于大量文本和少量文本。你不需要指定任何东西的宽度，它应该在IE8中工作。

.wrap1 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-y: auto; } .wrap2 { display: table; width: 100%; height: 100%; text-align: center; } .wrap3 { vertical-align: middle; display: table-cell; } .wrap4 { margin: 10px; } .dialog { text-align: left; background-color: white; padding: 5px; border-radius: 3px; margin: auto; display: inline-block; box-shadow: 2px 2px 4px rgba(0, 0, 0, .5); } <div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <div class="wrap4"> <div class="dialog"> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> </div> </div>

根据MDN，现在可以为align-items和justify-content等属性提供安全值。具体描述如下:

如果项的大小溢出对齐容器，则将项改为对齐，就像启动对齐模式一样。

所以，它可以这样使用。

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

然而，目前还不清楚它有多少浏览器支持，我找不到任何使用它的例子，而且我自己也遇到过一些问题。在这里提到它是为了引起更多的关注。

我只用了3个容器就搞定了。诀窍是将flexbox容器与控制滚动的容器分开。最后，将所有内容放到根容器中，使其居中。以下是创造这种效果的基本风格:

CSS:

.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;
}

HTML:

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

我在这里创建了一个演示:https://jsfiddle.net/r5jxtgba/14/

我还使用了额外的容器

HTML

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>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.</p>
        </div>
      </div>
  </div>  
</div>

CSS

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

在j藐视> https://j藐视dle.net/nas171/cpf4weq5/

更改.content的宽度/高度值并查看

2容器Flex方法与表回退测试IE8-9, Flex工作在IE10,11。 编辑:编辑，以确保垂直中心时，最小的内容，增加了传统的支持。

正如Michael回答的那样，这个问题源于高度继承自视口大小，这会导致儿童溢出。https://stackoverflow.com/a/33455342/3500688

something more simple and use flex to maintain the layout within the popup container(content): #popup { position: fixed; top: 0; left: 0; right: 0; min-height: 100vh; background-color: rgba(0,0,0,.25); margin: auto; overflow: auto; height: 100%; bottom: 0; display: flex; align-items: flex-start; box-sizing:border-box; padding:2em 20px; } .container { background-color: #fff; margin: auto; border: 1px solid #ccc; border-radius: 4px; background: #fff; /* width: 100%; */ max-width: 500px; padding: 10px; /* display: flex; */ /* flex-wrap: wrap; */ } <!--[if lt IE 10]> <style> #popup { display: table; width:100%; } .iewrapper { display: table-cell; vertical-align: middle; } </style> <![endif]--> <div id="popup"> <!--[if lt IE 10]> <div class="iewrapper"> <![endif]--> <div class="container"> <p class="p3">Test</p> <p class="p3">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.</p> <p class="p3">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.</p> </div> <!--[if lt IE 10]> <div class="iewrapper"> <![endif]--> </div>

您可能应该使用margin: auto技术，但如果出于某种原因不想使用flexbox，则可以使用带有vertical align hack的pseudo元素来实现这一点。

例子

如果codepen不起作用

<div class="wrapper">
  <div class="modal"></div>
</div>

<style>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  overflow-y: auto;
  text-align: center;
}

/* Required for centering */
.wrapper:before {
  content: '';
  height: 100%;
  width: 0;
  vertical-align: middle;
  display: inline-block;
}

.modal {
  /* Required for centering */
  display: inline-block;
  vertical-align: middle;


  text-align: left;
  width: 320px;
  height: 320px;
  background-color: #fff;
  border-radius: 25px;
}
</style>

它的工作原理是创建一个内联元素，作为父元素的全高，并显示为内联块，就像你的目标元素(.modal)一样，然后在两个元素上都使用vertical-align: middle，浏览器会发挥它的魔力——它会将.modal和pseudo元素对齐，就像它们是常规文本一样。你也可以在模态div上使用上下垂直对齐。结合文本对齐，模态可以放置在任何位置。

你可以在父控件上使用text-align: center将对话框水平居中。应该支持在任何浏览器和溢出也工作。

在撰写本文时(2021年9月15日)，以隐身模式转到谷歌会显示一个cookie策略模式，该模式使用这种技术来居中。

不要使用justify-content: center，而是添加两个div，其中flex: 1作为flex容器的第一个和最后一个子容器。

html, body { background-color: blue; height: 100%; overflow: hidden; } .container { background-color: red; height: 100%; display: flex; flex-direction: column; overflow: hidden auto; } .flex-1 { flex: 1; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="container"> <div class="flex-1"></div> <h1> This is a static template, there is no bundler or bundling involved! </h1> <p> This is a static template, there is no bundler or bundling involved! This is a static template, there is no bundler or bundling involved! </p> <div class="flex-1"></div> </div> </body> </html>

试试这个!

<div class="flex-container">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third item</div>
</div>

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;

    .item:first-child {
        margin-left: auto;
    }

    .item:last-child {
        margin-right: auto;
    }
}

我的案例使用水平伸缩和溢出，确实是一个boomer。我试图在水平弯曲上制作可滚动的内容，如下面的例子:

div { 显示:flex; justify-content:中心; overflow-x:汽车; ｝ {前 填充:30 px; 背景:灰色; 保证金:20 px; ｝ < div > < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < / div >

解决方案是在第一个和最后一个元素上使用margin:auto:

div { 显示:flex; justify-content: flex-start; overflow-x:汽车; ｝ {前 填充:30 px; 背景:灰色; 保证金:20 px; ｝ Pre:第一个孩子{margin-left:自动;｝ Pre:最后一个子{margin-right:自动;｝ < / p > < p >当溢出: < div > < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < / div > <p>当not overflow时:</p> < div > < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < / div >

希望能有所帮助