如何使用Flexbox布局实现div在body可视区域水平垂直居中？

发布日期： 2024-11-07 阅读量： 作者： 网络

flexbox布局实现div在body可视区域水平垂直居中

想要让div在body可视区域水平垂直居中，需要使用以下步骤：

1. 父容器使用position: fixed
将父容器设置成固定定位，并填满视窗。

2. display: flex; justify-content: center; align-items: center
为父容器设置弹性布局，并使用justify-content和align-items使子容器居中对齐。

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;
}

# 弹性布局 # 垂直居中 # 固定定位

如何使用Flexbox布局实现div在body可视区域水平垂直居中？

随便看看