html5的css使用display: flex进行div居中的坑！

最近做项目的时候，有个需求，一个高度宽度不确定的Div在另一个Div内上下左右居中。

然后以前上下居中用的都是很繁琐的，就打算去百度搜索一个更优秀的方法。

百度AI自己给我一个例子：

 /* div在容器里居中显示，设置外容器 */
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 设置容器的高度 */
    overflow: auto;
  }

我一用，真的超级好用啊，简简单单几句代码，内部的div就上下左右居中。

可是后来我发现一个巨坑！就是div里面的内容多了，超出父div的高度时，子内容不能全部显示。

百度了一下也没有解决办法，自己也用了google浏览器 F12的开发工具调试都不行

最终发现，可以通过添加一句话： flex-wrap: wrap来解决

 /* div在容器里居中显示，设置外容器 */
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 设置容器的高度 */
    overflow: auto;
      flex-wrap: wrap;
  }