flex 布局文本垂直水平居中

使用 Flex 布局可以很方便地实现文本的垂直和水平居中。

HTML 代码：

<div class="container">
  <div class="content">
    <p>这是一段文本</p>
  </div>
</div>

CSS 代码：

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

.content {
  text-align: center;
}

p {
  margin: 0;
}

上述代码中，`.container` 为容器，使用 `display: flex` 开启 Flex 布局，并通过 `justify-content: center` 和 `align-items: center` 实现水平和垂直居中。`.content` 为文本容器，使用 `text-align: center` 实现文本水平居中。`p` 为文本元素，通过 `margin: 0` 去除默认的外边距。

注意：上述代码中，容器的高度设置为视口高度，这是因为垂直居中需要确定容器的高度，如果不确定容器高度，可以使用 `min-height: 100vh` 或其他方式来设置容器高度。

相关问题

flex布局文本垂直水平居中

可以使用 flex 布局实现文本垂直水平居中，具体实现方法如下：

HTML代码：

<div class="container">
  <div class="content">这是一段文本</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.content {
  text-align: center;
}

解释：

`.container` 使用 flex 布局，并设置了 `justify-content: center;` 和 `align-items: center;`，使其子元素在横向和纵向上都居中对齐。

`.content` 设置了 `text-align: center;`，使文本在水平方向上居中对齐。

flex 布局 文本垂直居中

在 flex 布局中，可以使用 justify-content 属性来控制主轴方向上的对齐方式，使用 align-items 属性来控制交叉轴方向上的对齐方式。如果要让文本垂直居中，可以将文本所在元素设置为 flex 容器，然后使用 align-items: center; 将文本在交叉轴方向上居中。

以下是一个简单的示例代码：

<div class="container">
  <p class="text">这里是文本</p>
</div>

.container {
  display: flex;
  align-items: center; /* 交叉轴方向居中对齐 */
}

.text {
  margin: 0; /* 取消默认的上下 margin */
}

在上面的代码中，我们将容器设置为 flex 布局，然后使用 align-items 属性将文本在交叉轴方向上居中对齐。同时，为了去除默认的上下 margin，我们还给文本添加了 margin: 0;。这样就可以实现文本的垂直居中了。