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