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

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

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

1. .realData {
2.   display: flex;
3.   padding: 40px 0;
4.   .title {
5.     width: 40%;
6.     font-weight: 600;
7.     font-size: 28px;
8.     display: flex; /* 使用 Flexbox */
9.     align-items: center; /* 垂直居中 */
10.     justify-content: center; /* 水平居中（可选） */
11.   }
12.   .data {
13.     flex: 1;
14.     display: flex; /* 使用 Flexbox */
15.     align-items: center; /* 垂直居中 */
16.     justify-content: center; /* 水平居中（可选） */
17.   }
18. }

复制代码

组件文件

1. import React from 'react';
2. import { View } from '@tarojs/components';
3. import styles from './index.module.scss';
5. const MyComponent: React.FC = () => {
6.   return (
7.     <View className={styles.realData}>
8.       <View className={styles.title}>数据</View>
9.       <View className={styles.data}>2号</View>
10.     </View>
11.   );
12. };
14. export default MyComponent;

复制代码

方法二：使用 CSS Grid

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

1. .realData {
2.   display: grid;
3.   padding: 40px 0;
4.   .title {
5.     width: 40%;
6.     font-weight: 600;
7.     font-size: 28px;
8.     display: grid; /* 使用 CSS Grid */
9.     place-items: center; /* 水平垂直居中 */
10.   }
11.   .data {
12.     flex: 1;
13.     display: grid; /* 使用 CSS Grid */
14.     place-items: center; /* 水平垂直居中 */
15.   }
16. }

复制代码

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

这种方法相对简朴，但只实用于固定高度且是单行的文本。
   这个一定要先固定行高，不让无法生效
  示例

1. .realData {
2.   display: flex;
3.   padding: 40px 0;
4.   .title {
5.     width: 40%;
6.     font-weight: 600;
7.     font-size: 28px;
8.     height: 100px; /* 固定高度 */
9.     line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
10.   }
11.   .data {
12.     flex: 1;
13.     height: 100px; /* 固定高度 */
14.     line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
15.   }
16. }

复制代码

方法四：使用 Position + Transform

这种方法也实用于各种场景，固然写法稍显繁琐。
示例

1. .realData {
2.   display: flex;
3.   padding: 40px 0;
4.   .title, .data {
5.     position: relative;
6.     width: 40%;
7.     font-weight: 600;
8.     font-size: 28px;
9.   }
10.   .title::before {
11.     content: '';
12.     display: inline-block;
13.     height: 100%;
14.     vertical-align: middle;
15.   }
16.   .title span {
17.     display: inline-block;
18.     vertical-align: middle;
19.   }
20. }

复制代码

组件文件

1. import React from 'react';
2. import { View } from '@tarojs/components';
3. import styles from './index.module.scss';
5. const MyComponent: React.FC = () => {
6.   return (
7.     <View className={styles.realData}>
8.       <View className={styles.title}><span>数据</span></View>
9.       <View className={styles.data}>2号</View>
10.     </View>
11.   );
12. };
14. export default MyComponent;

复制代码

总结

推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简朴易用，而且兼容性好，实用于各种场景。line-height 方法也可以在简朴的单行文本垂直居中效果中使用。假如你更加灵活地调整，你可能须要联合多个方法。
通过这些方法，你可以确保文本在容器中垂直居中，并且在不同的设备和分辨率下都能保持精良的显示效果。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。