CSS 中，居中的 div，是否会自动缩小以适应内容大小

在本文中，我们将介绍CSS中如何创建并居中一个div，并探讨这个div是否会自动缩小以适应其内容大小。

阅读更多：CSS 教程

创建居中的div

首先，我们需要创建一个居中的div。为了实现这一点，我们可以使用CSS的flexbox布局。以下是一个简单的示例代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /*设置容器的高度为视口的100%*/
}

.centered-div {
  background-color: #f0f0f0;
  padding: 20px;
}

在上面的代码中，我们创建了一个名为container的div作为外层容器，并为其设置了flex布局，使其内容在水平和垂直方向上都居中显示。然后，我们在container中创建了一个名为centered-div的div，用于显示内容。

缩小以适应内容大小？

现在我们来看看居中的div是否会自动缩小以适应其内容大小。我们在centered-div中添加一些文本内容，然后观察div的表现：

<div class="container">
  <div class="centered-div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod consectetur quam, at tristique lorem. Suspendisse viverra maximus velit sed auctor.
  </div>
</div>

在上面的代码中，我们在centered-div中添加了一段文本内容。如果居中的div会自动缩小以适应内容大小，我们将看到div的背景颜色只覆盖文本周围的区域，并且div的宽度和高度将自动调整。让我们来看看实际结果。

通过测试我们可以发现，居中的div并不会自动缩小以适应其内容大小。无论文本有多长，div的宽度和高度都将保持不变。换句话说，居中的div将占据整个容器的空间，并不会根据内容的大小进行自适应调整。