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;

}

相关推荐
笔尖的记忆几秒前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin8889 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
lichenyang45317 分钟前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼17 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
软件技术NINI28 分钟前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
用户8417948145629 分钟前
vxe-table 实现列头授权自定义插槽模板,自定义输入框
前端
im_AMBER33 分钟前
Web 开发 24
前端·笔记·git·学习
小小前端_我自坚强36 分钟前
前端算法相关详解
前端·算法
小小前端_我自坚强42 分钟前
UniApp 微信小程序流水线发布全流程
前端·架构
小小前端_我自坚强1 小时前
vue提高技术 高级语法相关
前端·vue.js·前端框架