CSS 文字在旋转后的垂直和水平居中对齐

在本文中，我们将介绍如何在 CSS 旋转后垂直和水平居中对齐文本的方法。

阅读更多：CSS 教程

旋转 CSS 文本

在开始介绍对齐文本之前，我们先了解一下如何旋转 CSS 文本。通过使用 transform: rotate() 属性，我们可以对文本进行旋转。下面是一个例子：

.rotate-text {
  transform: rotate(-90deg);
}

上面的代码会将 .rotate-text 类中的文本逆时针旋转90度。

文本垂直居中对齐

在进行文本的垂直居中对齐之前，我们需要明确元素的高度。有两种常用的方法可以实现文本的垂直居中对齐。

使用 Flexbox

Flexbox 是一种强大的 CSS 布局工具，可以方便地对元素进行垂直和水平居中对齐。下面是一个使用 Flexbox 将文本垂直居中对齐的例子：

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

上面的代码将 .container 类中的文本垂直居中对齐。需要注意的是，父元素 .container 必须具有一个明确的高度。

使用绝对定位

另一种常用的方法是使用绝对定位来实现文本的垂直居中对齐。下面是一个例子：

.container {
  position: relative;
}

.centered-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

上面的代码将 .centered-text 类中的文本垂直居中对齐。通过将元素的 top 属性设置为50%，再通过 transform: translateY(-50%) 将元素往上移动50%，就可以实现垂直居中对齐。同样地，父元素 .container 必须具有一个明确的高度。

文本水平居中对齐

在进行文本的水平居中对齐之前，我们需要明确元素的宽度。同样地，有两种常用的方法可以实现文本的水平居中对齐。

使用 Flexbox

Flexbox 不仅可以实现垂直居中对齐，还可以实现水平居中对齐。下面是一个使用 Flexbox 将文本水平居中对齐的例子：

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

上面的代码将 .container 类中的文本水平居中对齐。同样地，父元素 .container 必须具有一个明确的宽度。

使用文本的宽度和 `margin`

另一种常用的方法是使用文本的宽度和 margin 属性来实现水平居中对齐。下面是一个例子：

.centered-text {
  margin-left: auto;
  margin-right: auto;
}

上面的代码将 .centered-text 类中的文本水平居中对齐。通过将 margin-left 和 margin-right 属性都设置为 auto，可以使文本在父元素中水平居中对齐。

示例

下面是一个完整的示例，展示了如何同时使用 Flexbox 和绝对定位来实现旋转后文本的垂直和水平居中对齐：

<div class="container">
  <div class="rotate-text flex-align">Flexbox 居中对齐</div>
  <div class="rotate-text absolute-align">绝对定位居中对齐</div>
</div>

.container {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #f0f0f0;
}

.rotate-text {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.flex-align {
  display: flex;
  align-items: center;
}

.absolute-align {
  margin-left: auto;
  margin-right: auto;
}

上面的代码中，.container 类设置了一个固定的宽度和高度，并且添加了一个背景颜色。.rotate-text 类设置了文本的水平和垂直居中对齐方式，其中 flex-align 类使用了 Flexbox，在这个例子中文本将被上下居中对齐；absolute-align 类使用了绝对定位，在这个例子中文本将被上下左右居中对齐。

总结

通过使用 Flexbox 和绝对定位，我们可以实现旋转后文本的垂直和水平居中对齐。使用 Flexbox 是一种简单而强大的方法，但需要注意父元素必须具有明确的宽度和高度。绝对定位是另一种常用的方法，通过使用 top 和 transform 属性可以轻松地实现文本的垂直居中对齐。使用这些技巧，我们可以轻松地在 CSS 中控制旋转后文本的对齐方式，使其更加美观和易读。