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;

}

相关推荐
佛系菜狗5 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
爱的叹息26 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
一个天蝎座 白勺 程序猿31 分钟前
Python爬虫(4)CSS核心机制:全面解析选择器分类、用法与实战应用
css·爬虫·python
遗憾随她而去.33 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快2 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛2 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼2 小时前
React.memo 和 useMemo
前端·javascript·react.js