如何让div在body可视区域水平垂直居中?

作者站长头像
站长
· 阅读数 6

这里不是说div里面的内容,水平垂直居中。而是div这个容器在浏览器可视区域内水平垂直居中,并且div的高度宽度自适应,也就是说不能写死div的宽度高度,内容自适应。以前有一种写法是绝对定位, 还要设置宽度高度,CSS3现在不是有弹性布局和网格布局吗,不知道能不能快速实现。

回复
1个回答
avatar
test
2024-07-02
  1. 父容器使用 position: fixed,上下左右都是 0,填满视窗
  2. 然后 display:flex; justify-content: center; align-items: center,把子容器居中
  3. 最后字容器的宽高根据内容来调整。

大体上:

.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;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容