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

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可视区域水平垂直居中？的详细内容，更多请关注其它相关文章！