uniapp文本水平垂直居中

可以使用flex布局实现文本的水平垂直居中。

1. 在文本所在的父元素上设置display: flex;和justify-content: center;align-items: center;即可实现水平垂直居中。

例如：

<template>
  <view class="container">
    <text class="text">Hello World!</text>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.text {
  font-size: 20px;
}
</style>

2. 如果希望仅实现水平居中或垂直居中，可以根据需要设置justify-content或align-items的值。

例如，仅实现水平居中：

<template>
  <view class="container">
    <text class="text">Hello World!</text>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  height: 100%;
}
.text {
  font-size: 20px;
}
</style>

仅实现垂直居中：

<template>
  <view class="container">
    <text class="text">Hello World!</text>
  </view>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  height: 100%;
}
.text {
  font-size: 20px;
}
</style>