[分享]css中怎么控制文字垂直居中

在 CSS 中，控制文本垂直居中可以使用不同的方法。一种很常见的方法是使用行高，将行高设置为容器高度的值。这样，文字就可以垂直居中。例如： .container { height: 100px; li...

在 CSS 中，控制文本垂直居中可以使用不同的方法。
一种很常见的方法是使用行高，将行高设置为容器高度的值。这样，文字就可以垂直居中。例如：

<style>
.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>

<div class="container">
  <p>这是一个居中对齐的段落。</p>
</div> 

上面的代码将段落垂直居中在 `.container` 容器内部。通过设置 `line-height` 的值与容器高度相等，就可以将文字垂直居中了。同时，为了保证文字水平居中，我们设置了容器的 `text-align` 属性为 `center`。
除了使用行高之外，还可以使用表格布局或 flex 布局来实现垂直居中。

<style>
.container {
  height: 100px;
  display: table;
  width: 100%;
}

p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>

<div class="container">
  <p>这是一个居中对齐的段落。</p>
</div> 

这里我们将 `.container` 容器设置为表格布局，设置 `display: table`。同时，通过 `display: table-cell` 和 `vertical-align: middle` 设置段落垂直居中。为了保证文字水平居中，我们设置了段落的 `text-align` 属性为 `center`。
使用 flex 布局同样可以实现垂直居中。

<style>
.container {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class="container">
  <p>这是一个居中对齐的段落。</p>
</div> 

上面的代码通过设置 `.container` 容器的 `display` 属性为 `flex`，并使用 `justify-content` 和 `align-items` 属性将段落垂直居中并保证水平居中。
无论采用哪种方法，都可以轻松地控制文本的垂直居中。需要注意的是，部分浏览器可能对某些方法支持度不够，所以在使用时需要注意兼容性。