最近做项目的时候，有个需求，一个高度宽度不确定的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;
}