uniapp 居中

水平居中

文本居中
在 text 组件中设置 text-align: center 样式：

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

视图（View）居中
使用 flex 布局实现水平居中：

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

绝对定位居中
结合 position: absolute 和 transform 实现绝对定位居中：

.absolute-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

垂直居中

单行文本垂直居中
设置 line-height 等于容器高度：

.single-line-center {
  height: 100px;
  line-height: 100px;
}

多行内容垂直居中
使用 flex 布局：

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

绝对定位垂直居中
通过 top 和 transform 实现：

.absolute-vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

水平垂直居中

Flex 布局实现
同时设置 justify-content 和 align-items：

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

绝对定位实现
结合 left、top 和 transform：

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

注意事项

• 在 uniapp 中，部分组件（如 view）默认是块级元素，可直接应用 flex 布局。
• 绝对定位需确保父容器有 position: relative 或其他定位属性。
• 移动端适配时，建议优先使用 flex 布局，兼容性更好。