Question

虽然有许多问题要求使用flexbox和垂直居中，但它们似乎都没有考虑到固定位置包装器。请考虑以下事项：

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow: auto;
}

.modal-content {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
}

如果您为.modal-content填充了足够的内容以导致垂直滚动条，则只能滚动向下，并且模式顶部的内容将被切断。< / p>

问题演示：http://s.codepen.io/graygilmore/debug/3ff624cb89760c3469f286443f1c726a

这可以通过删除fixed属性来解决，但是当内容太小而无法导致滚动条时，这只会引发.modal-wrapper的新问题，而不会跨越足够的高度。

为什么我可以滚动到模态的底部，但它的顶部会被切断？

Answer 1

取代margin: 0 auto弹性项目上的.modal-content，而不是使用margin: auto。

详情请参阅我的回答：https://stackoverflow.com/a/33455342/3597276

模态顶部在flexbox中被切断

1 个答案: