使用 margin:auto 居中 flex 元素

在一个使用了 align-items: center; justify-content: center; 的 flex container 中，如果子元素的高度或宽度大于 container 的高度或宽度，子元素可能会显示不完整，具体问题可以看 stack overflow。

解决方法是在 container 删除 align-items: center; justify-content: center;，然后在子元素增加 margin: auto，即由子元素自己居中自己，当然，这样做了之后子元素显示在 container 的那部分就不是它最中间的部分：

• 如果子元素的宽度大于 container 的宽度，那子元素会在 container 中上下居中显示，水平方向则展示自己最左边的部分；
• 如果子元素的高度大于 container 的高度，子元素会在 container 中左右居中显示，垂直方向展示自己最顶部的部分；

相关文章：

• 深入理解 Flexbox：这篇笔记也提到了使用 margin 居中一个元素，还有更多深入知识点；
• CSS 对内容进行居中的几种方法