问题
Flexbox使居中非常容易。
通过简单的应用
align-items: center，并
justify-content: center以柔性容器，你的Flex项目（S）将垂直和水平居中。
但是，当flex项大于flex容器时，此方法存在问题。
正如问题所指出的，当flex项溢出容器时，顶部将变得不可访问。
对于水平溢出，左侧部分不可访问（或在RTL语言中右侧部分）。
这是一个LTR容器包含justify-content: center三个flex项目的示例：
解决方案1
要解决此问题，请使用flexbox自动边距，而不是justify-content。
使用auto边距，可以将溢出的flex项目垂直和水平居中，而不会丢失对其任何部分的访问权限。
因此，而不是在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 item]的大小溢出[flex container]，则将[flex item]对齐，就好像对齐方式是[ flex-start]。
unsafe
无论[flex item]和[flex container]的相对大小如何，都应遵守给定的对齐值。
注意：“框对齐模块”可用于多个框布局模型，而不仅仅是flex。因此，在上面的摘录中，方括号中的术语实际上是“对齐主题”，“对齐容器”和“ start”。我使用了特定于flex的术语来保持对这个特定问题的关注。
MDN的滚动限制说明：
与CSS中的其他居中方法不同，Flexbox的对齐属性进行“真正”居中。这意味着即使弹性项目溢出弹性容器，弹性项目也将保持居中。
但是，如果它们溢出页面的顶部边缘或左侧边缘，有时可能会出现问题，因为即使其中有内容，您也无法滚动到该区域！
在将来的版本中，对齐属性也将扩展为具有“安全”选项。
现在，如果这是一个问题，您可以改用边距来实现居中，因为它们将以“安全”的方式进行响应，并在溢出时停止居中。
无需使用
align-属性，只需将auto边距放在要居中的弹性项目上。
代替
justify-属性，将自动页边距放在flex容器中第一个和最后一个flex项的外边缘上。
该
auto利润率将“灵活”，并承担剩余的空间，围绕柔性物品时，有剩余的空间，并切换到正常的排列时，没有。
但是，如果您要替换
justify-content多行
flexbox中基于边距的居中，则可能不走运，因为您需要在每行的第一个和最后一个
flex项目上放置边距。除非您可以提前预测哪些项目将在哪一行结束，否则您将无法可靠地在主轴中使用基于边距的居中中心来替换
justify-content属性。
