微信小程序image居中

要让微信小程序中的图片居中，可以将图片包裹在一个 view 容器中，然后使用 flex 布局实现居中。具体的代码如下：

<view class="container">
  <image class="img" src="./image.png"></image>
</view>

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

.img {
  width: 100px;
  height: 100px;
}

在上面的代码中，我们使用了 `display: flex` 属性将容器设置为 flex 布局，使用 `justify-content: center` 和 `align-items: center` 将图片水平和垂直居中。同时，我们还需要设置容器的高度为 100%，以确保容器能够占满整个屏幕。

最后，我们需要给图片设置一个固定的宽度和高度，以确保图片大小不会影响布局。

相关问题

微信小程序image设置加载loading

你可以在设置image标签时，添加一个loading属性，来实现图片加载时的loading效果。例如：

<image src="{{imageUrl}}" mode="aspectFit" loading="{{true}}"></image>

这里的loading属性设置为true，表示开启loading效果。当图片加载完成后，loading效果将会自动消失。

你也可以自定义loading效果，只需要在样式表中定义一个名为"wx-image__loading"的class，然后在该class中设置loading效果的样式即可。例如：

.wx-image__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

这里的loading效果是一个灰色背景，并且居中显示一个loading图标。

微信小程序让图片居中

以下是两种微信小程序中让图片居中的方法：
1.使用flex布局，将图片包裹在一个view中，并设置该view为flex布局，然后使用justify-content和align-items属性将图片居中。

<view class="container">
  <image class="img" src="xxx"></image>
</view>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.img {
  width: 50%;
  height: 50%;
}

2.使用position属性，将图片的左上角定位到父容器的中心点，然后使用transform属性将图片向左上方移动自身宽高的一半，即可实现图片居中。

<view class="container">
  <image class="img" src="xxx"></image>
</view>

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