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

方法一：使用 Flexbox

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

示例

<code>.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 方法也可以在简单的单行文本垂直居中效果中使用。如果你更加灵活地调整，你可能需要结合多个方法。

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