如何让div在body可视区域水平垂直居中?
这里不是说div里面的内容,水平垂直居中。而是div这个容器在浏览器可视区域内水平垂直居中,并且div的高度宽度自适应,也就是说不能写死div的宽度高度,内容自适应。以前有一种写法是绝对定位, 还要设置宽度高度,CSS3现在不是有弹性布局和网格布局吗,不知道能不能快速实现。
回复
1个回答
test
2024-07-02
- 父容器使用
position: fixed
,上下左右都是0
,填满视窗 - 然后
display:flex; justify-content: center; align-items: center
,把子容器居中 - 最后字容器的宽高根据内容来调整。
大体上:
.parent {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: fit-content;
height: fit-content;
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容