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;

}

相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe1 小时前
前端开发中的难题及解决方案
前端·问题
Hockor3 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军3 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到113 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡3 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu3 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂3 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军3 小时前
React 实现多个节点 diff
前端·react.js·前端框架