让文字水平垂直居中于父级

可以使用 `display: flex` 和 `justify-content` 和 `align-items` 来实现文字水平垂直居中于父级。具体实现方式如下：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  text-align: center; /* 水平居中 */
  line-height: 1; /* 垂直居中 */
}

这里的 `.parent` 是父级元素，`.child` 是子元素，使用 `display: flex` 将父级元素设置为 flex 布局，使用 `justify-content: center` 和 `align-items: center` 分别实现水平和垂直居中。同时，为了让子元素水平居中，可以使用 `text-align: center`，为了让子元素垂直居中，可以将 `line-height` 设置为 1。

相关问题

html使文字水平垂直居中几种方法

HTML本身并不直接提供内置的属性来让文本水平垂直居中，但你可以借助CSS来实现这个效果。以下是几种常见的方法：

1. **Flexbox**:
使用`display: flex; justify-content: center; align-items: center;`于包含元素上，可以将其中的内容水平和垂直居中。

<div style="display: flex; justify-content: center; align-items: center;">
  <p>这里是居中内容</p>
</div>

2. **Grid**:
如果项目支持，可以使用CSS Grid布局：

<div style="display: grid; place-items: center;">
  <p>这里是居中内容</p>
</div>

3. **Positioning** (绝对定位 + 父级相对定位):
对于非容器元素，可以结合`position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);`：

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="parent">
  <p class="child">这里是居中内容</p>
</div>

4. **内联样式**:
可以直接在`<p>`标签上设置`text-align: center; vertical-align: middle; display: inline-block;`：

<p style="text-align: center; vertical-align: middle; display: inline-block;">这里是居中内容</p>

请注意，这种方法可能不适用于所有浏览器，因为`vertical-align`对行内元素的效果有限。

uniapp中text标签的文字相对于父级垂直居中

你可以通过设置 `line-height` 属性实现 `text` 标签的文字相对于父级垂直居中。假设你的父级元素是一个 `div`，你可以将 `line-height` 设置为等于父元素高度的值，例如：

<template>
  <div class="parent">
    <text class="child">这是一段居中的文字</text>
  </div>
</template>

<style>
.parent {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  line-height: 100px;
}
</style>

在上面的例子中，我们通过设置 `parent` 的 `display` 为 `flex` 并设置 `justify-content` 和 `align-items` 为 `center`，使得 `parent` 垂直和水平居中。同时，我们设置 `child` 的 `line-height` 为 `100px`，使得其中的文字也垂直居中。

当然，如果你的父元素高度是动态的，你可以使用 JavaScript 动态计算父元素高度，然后将 `line-height` 设置为相应的值。