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

2025/2/25 2:11:45 来源：https://blog.csdn.net/m0_74825488/article/details/144396918 浏览: 次关键词：【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;