如何使用 CSS3 弹性布局实现浏览器可视区域内水平垂直居中的自适应容器？
在浏览器可视区域内水平垂直居中div
问题中提出了一种需求，即在浏览器可视区域内将一个容器（div）水平和垂直居中，并且容器的高度和宽度要自适应。
CSS3弹性布局
CSS3中可以使用弹性布局来实现这一需求。弹性布局提供了强大的对齐功能，可以轻松地将元素对齐到父容器的中心。
代码示例
.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;
}在上面代码中：
- .parent是一个父容器，使用position: fixed将其固定在视窗内，并通过top、left、right和bottom属性填满视窗。
- display: flex将.parent转换为弹性容器。justify-content: center将子元素水平居中，而align-items: center将子元素垂直居中。
- .center是需要居中的容器，它的宽度和高度根据其内容进行自适应。
通过设置这些属性，.center容器将在浏览器可视区域内水平和垂直居中，并且它的尺寸将根据内容进行调整。