原文: http://www.imooc.com/wenda/detail/562829
flex容器里面的子元素，设置margin: auto 就可以了
--------------------------------------------------------------------------------------
无法滚动到溢出容器的Flex项的顶部
所以，在尝试使用Flexbox建立一个有用的模式时，我发现了一个似乎是浏览器问题的东西，我想知道是否有一个已知的修复或解决方法-或者关于如何解决它的想法。
我想解决的问题有两个方面。首先，获得垂直中心的模态窗口，这是按预期工作的。第二种方法是让模态窗口从外部滚动-因此整个模态窗口滚动，而不是其中的内容(这样您就可以有下拉列表和其他UI元素，这些元素可以扩展到模式边界之外-比如自定义日期选择器，等等)。
然而，当将垂直对中和滚动条组合在一起时，当模式的顶部开始溢出时，就会变得不可访问。在上面的例子中，您可以调整大小以强制溢出，这样做可以让您滚动到模态的底部，而不是顶部(第一段被切断)。
下面是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.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;
100%;
max- 500px;
padding: 10px}
这个效果(当前)火狐，Safari，Chrome和Opera。有趣的是，如果你在IE10供应商前缀CSS中发表评论的话，它在IE10中的行为确实是正确的-我还没有费心在IE11中进行测试，但假设它的行为与IE10的行为相匹配。
任何想法都是好的。链接到已知的问题或这种行为背后的推理也是有用的。
3 回答
问题
Flexbox使对中非常容易。
通过简单的应用align-items: center和justify-content: center对于FLEX容器，您的FLEX项将以垂直和水平为中心。
但是，当FLEX项大于FLEX容器时，此方法存在问题。
正如问题中所指出的，当FLEX项溢出容器时，顶部变得不可访问。
对于水平溢出，左侧部分变得不可访问(或右部分，在RTL语言中)。
下面是一个LTR容器的示例justify-content: center还有三件柔韧物品：
有关此行为的解释，请参阅此答案的底部。
解决方案1
若要修复此问题，请使用挠曲箱自动边距，而不是justify-content.
带着auto边距，溢出的挠曲项目可以垂直和水平中心，而不会失去对它的任何部分的访问。
因此，与FLEX容器上的代码不同的是：
#flex-container {
align-items: center;
justify-content: center;}
在Flex项上使用以下代码：
.flex-item {
margin: auto;}
解决方案2(尚未在大多数浏览器中实现)
添加safe值到关键字对齐规则，如下所示：
justify-content: safe center
或
align-self: safe center
4.4.溢出对齐：
safe和unsafe关键词与滚动安全限值当[FLEX项]大于[FLEX容器]时，它将溢出。如果在这种情况下采用某些对齐模式，则可能会导致数据丢失：例如，如果侧边栏的内容居中，则当其溢出时，可能会将部分框发送到视口的起始边缘，无法滚动到。
要控制这种情况，溢流对准模式可以显式指定。
Unsafe在溢出情况下，对齐遵守指定的对齐模式，即使它会导致数据丢失，而safe在溢出情况下，对齐方式会更改，以避免数据丢失。默认行为是将对齐主题包含在可滚动区域内，尽管在编写此安全特性时尚未实现。
safe如果[FLEX项]的大小溢出了[FLEX容器]，则[FLEX项]将像对齐模式一样对齐[FLEX项]。
flex-start].
unsafe无论[FLEXItem]和[FLEX容器]的相对大小如何，给定的对齐值都是受尊重的。
注意：Box对齐模块用于多个盒子布局模型，而不仅仅是FLEX。因此，在上面的规范摘录中，括号中的术语实际上是“对齐主题”、“对齐容器”和“对齐容器”。start“.我用了一些具体的术语来关注这个特定的问题。
MDN对滚动限制的解释：
Flexbox的对齐属性做“真”对中，不像CSS中的其他对中方法。这意味着FLEX项目将保持居中状态，即使它们溢出了FLEX容器。
但是，如果它们溢出到页面的顶部边缘或左侧边缘[.]，这有时会有问题，因为您不能滚动到该区域，即使那里有内容！
在未来的版本中，将扩展对齐属性，使其具有“安全”选项。
现在，如果这是一个问题，您可以使用边距来实现对中，因为它们将以“安全”的方式响应，并且在溢出时停止对中。
而不是使用
align-属性，只要把auto您希望居中的弹性项目的页边距。而不是
justify-属性，在Flex容器中的第一个和最后一个FLEX项的外部边缘放置自动边距。这个
auto边距将“弯曲”，并假定剩余空间，当有剩余空间时，以弹性项为中心，如果没有，则切换到正常对齐。但是，如果你想替换
justify-content以保证金为中心的多行挠曲盒，你可能是运气不好，因为你需要把第一个和最后一个挠性项目的每一行。除非您能够提前预测哪些项将在哪一行上结束，否则您无法可靠地使用位于主轴的基于保证金的中心位置来替换justify-content财产。