【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>);};exportdefault 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>);};exportdefault MyComponent;

总结

推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简单易用，而且兼容性好，适用于各种场景。

line-height

方法也可以在简单的单行文本垂直居中效果中使用。如果你更加灵活地调整，你可能需要结合多个方法。

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