【CSS】让文字垂直居中的方法

在 Taro 或任何基于 HTML 和 CSS 的项目中，有多种方法可以让文字垂直居中。这些方法包括使用 Flexbox、CSS Grid、line-height 等。下面我将详细介绍每种方法，并提供相关的代码示例。

方法一：使用 Flexbox

Flexbox 是现代布局的最佳选择之一。它不仅可以轻松地让内容在容器内垂直居中，还可以水平居中。

示例

.realData {
  display: flex;
  padding: 40px 0;
  .title {
    width: 40%;
    font-weight: 600;
    font-size: 28px;
    display: flex; /* 使用 Flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（可选） */
  }
  .data {
    flex: 1;
    display: flex; /* 使用 Flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（可选） */
  }
}

组件文件

import React from 'react';
import { View } from '@tarojs/components';
import styles from './index.module.scss';

const MyComponent: React.FC = () => {
  return (
    <View className={styles.realData}>
      <View className={styles.title}>数据</View>
      <View className={styles.data}>2号</View>
    </View>
  );
};

export default MyComponent;

方法二：使用 CSS Grid

CSS Grid 也支持非常灵活和强大的布局选项。

示例

.realData {
  display: grid;
  padding: 40px 0;
  .title {
    width: 40%;
    font-weight: 600;
    font-size: 28px;
    display: grid; /* 使用 CSS Grid */
    place-items: center; /* 水平垂直居中 */
  }
  .data {
    flex: 1;
    display: grid; /* 使用 CSS Grid */
    place-items: center; /* 水平垂直居中 */
  }
}

方法三：使用 Line-Height（仅适用于单行文本）

这种方法相对简单，但只适用于固定高度且是单行的文本。

这个一定要先固定行高，不让无法生效

示例

.realData {
  display: flex;
  padding: 40px 0;
  .title {
    width: 40%;
    font-weight: 600;
    font-size: 28px;
    height: 100px; /* 固定高度 */
    line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
  }
  .data {
    flex: 1;
    height: 100px; /* 固定高度 */
    line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
  }
}

方法四：使用 Position + Transform

这种方法也适用于各种场景，虽然写法稍显繁琐。

示例

.realData {
  display: flex;
  padding: 40px 0;
  .title, .data {
    position: relative;
    width: 40%;
    font-weight: 600;
    font-size: 28px;
  }
  .title::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .title span {
    display: inline-block;
    vertical-align: middle;
  }
}

组件文件

import React from 'react';
import { View } from '@tarojs/components';
import styles from './index.module.scss';

const MyComponent: React.FC = () => {
  return (
    <View className={styles.realData}>
      <View className={styles.title}><span>数据</span></View>
      <View className={styles.data}>2号</View>
    </View>
  );
};

export default MyComponent;

总结

推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简单易用，而且兼容性好，适用于各种场景。line-height 方法也可以在简单的单行文本垂直居中效果中使用。如果你更加灵活地调整，你可能需要结合多个方法。

通过这些方法，你可以确保文本在容器中垂直居中，并且在不同的设备和分辨率下都能保持良好的显示效果。