uniapp居中代码

水平居中

使用 text-align: center 可以让文本或内联元素水平居中。

.container {
  text-align: center;
}

对于块级元素，可以使用 margin: 0 auto 实现水平居中。

.box {
  margin: 0 auto;
  width: 200px;
}

垂直居中

使用 flex 布局可以轻松实现垂直居中。

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

使用 position 和 transform 也可以实现垂直居中。

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

水平垂直居中

使用 flex 布局同时设置 align-items 和 justify-content 为 center。

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

使用 grid 布局也可以实现水平垂直居中。

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

文本居中

文本在容器中居中可以使用 text-align 和 line-height。

.text-container {
  text-align: center;
  line-height: 200px;
  height: 200px;
}

图片居中

图片在容器中居中可以使用 object-fit 和 margin。

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

.image-container img {
  max-width: 100%;
  max-height: 100%;
}