CSS 伪元素:before/:after 中内容的垂直居中

在本文中，我们将介绍如何使用 CSS 的伪元素:before 和 :after 来实现内容的垂直居中。

阅读更多：CSS 教程

在 CSS 中创建伪元素

首先，我们需要了解如何在 CSS 中创建伪元素。伪元素是使用 ::before 或 ::after 选择器来创建的，它们可以通过 content 属性来添加内容。例如，下面的代码将为元素添加一个向左箭头的伪元素：

.arrow::before {
  content: "2190";
}

使用伪元素垂直居中文本

要垂直居中伪元素中的文本，我们可以使用一些技巧和 CSS 属性。

方法一：使用 Flexbox

Flexbox 是一个强大的 CSS 布局模型，方便我们在容器元素中创建灵活的布局。我们可以使用 Flexbox 的 align-items 和 justify-content 属性来垂直和水平居中文本。

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

.container:before {
  content: "我是文本";
}

方法二：使用绝对定位和 transform 属性

我们可以使用绝对定位和 transform 属性来垂直和水平居中文本。

.container {
  position: relative;
}

.container:before {
  content: "我是文本";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

添加内容垂直居中的示例

下面是一个示例，演示了如何使用伪元素垂直居中内容：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 200px;
        height: 200px;
        background-color: lightgray;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container:before {
        content: "我是文本";
        font-size: 24px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

在上面的示例中，我们创建了一个宽高为 200px 的容器，通过设置 display: flex，align-items: center 和 justify-content: center 来垂直居中伪元素中的文本。