uniapp 居中

水平居中

文本居中
在 text 或 view 组件中，使用 text-align: center 实现文本水平居中：

.text-center {
  text-align: center;
}

元素水平居中
通过 Flex 布局实现元素水平居中：

.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中

单行文本垂直居中
设置 line-height 与容器高度相同：

.vertical-text {
  height: 100px;
  line-height: 100px;
}

元素垂直居中
使用 Flex 布局的 align-items 属性：

.flex-middle {
  display: flex;
  align-items: center;
}

水平垂直居中

Flex 布局实现
结合 justify-content 和 align-items：

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

绝对定位实现
通过 position: absolute 和 transform 实现：

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

注意事项

• 在 uni-app 中，部分 CSS 属性可能需要添加浏览器前缀（如 -webkit-）。
• 使用 Flex 布局时，确保父容器有明确的高度或宽度。
• 绝对定位需依赖父容器设置为 position: relative。