uniapp水平居中

水平居中方法

flex布局实现居中
在父元素上添加以下样式，子元素会自动水平居中：

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

text-align实现行内元素居中
适用于文本或行内元素（如<span>）的水平居中：

.container {
  text-align: center;
}

绝对定位 + transform
适用于需要脱离文档流的元素居中：

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

margin: auto
块级元素通过设置左右外边距为auto实现居中：

.block {
  display: block;
  margin: 0 auto;
  width: 200px; /* 需指定宽度 */
}

注意事项

• 在Uniapp中，若使用Flex布局，需注意部分小程序平台默认display: block，需显式声明display: flex。
• 使用margin: auto时，确保元素为块级且已设置宽度。
• 绝对定位需确保父元素有position: relative或其他定位上下文。