uniapp居中代码

水平居中

在 uni-app 中实现水平居中可以通过 CSS 的 flex 布局或 text-align 属性。

使用 Flex 布局：

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

使用 text-align：

.container {
  text-align: center;
}

垂直居中

垂直居中通常需要结合 flex 布局或 position 属性。

使用 Flex 布局：

.container {
  display: flex;
  align-items: center;
  height: 100vh; /* 确保容器有高度 */
}

使用 position 和 transform：

.container {
  position: relative;
  height: 100vh;
}
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

水平垂直居中

同时实现水平和垂直居中可以使用 flex 布局或 position 结合 transform。

使用 Flex 布局：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

使用 position 和 transform：

.container {
  position: relative;
  height: 100vh;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

文本居中

文本居中可以直接使用 text-align 属性。

.text {
  text-align: center;
}

图片居中

图片居中可以通过 display: block 和 margin 实现。

.image {
  display: block;
  margin: 0 auto;
}

注意事项

• 确保父容器有足够的高度或宽度，否则居中效果可能不生效。
• 在 uni-app 中，某些 CSS 属性可能需要添加 !important 以确保生效。