Question

所以我使用CSS flex创建垂直居中的Modal弹出窗口（align-items: center;）。问题是，当Modal比视口高（并且可滚动）时，Flex会优先考虑“居中”和“中心”。从而使模态的顶部无法访问。

有没有人找到解决方法？我可以使用媒体查询来使所有模态flex-start对齐，但我仍然希望较小的模态垂直居中。

我曾想过尝试使模态灵活缩小;始终适合100％的视口，但它需要滚动（并允许内容适合页面的更下方），所以不确定！

.outer {
    display: flex;
    align-items: center;
}

Answer 1

你去吧

＆＃13;

.parent{
top:50px;
}
.parent,
.child {
  position: relative;
  width: 50px;
  height: 50px;
  margin: auto;
  background: #CCC;
}

.child {
  position: relative;
  width: 25px;
  height: 100px;
  margin: auto;
  background: #000;
  top: 50%;
  transform: translate(0, -50%);
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

Answer 2

感谢@Pete回答这个问题：

解决方案是设置max-height: 100%;和overflow: auto;（我以前曾overflow: visible;导致问题。

我还找到了另一种方法：

通过在'外部外部'容器上放置以下flex属性（在这种情况下，我们使用ReactModal，因此有ReactModalPortal）。

所以我们这样做 ```.ReactModalPortal { 显示：flex; align-items：flex-start;

.innerContainer {
    display: flex;
    align-items: center;
}

} ``` 我想通过将flex-start放在父母身上，它总是确保内容在窗口顶部“开始”。

CSS Flex：垂直居中的项目，比视口高

2 个答案: