小程序图片居中

在小程序中，我们常常需要将图片进行居中显示。下面将介绍两种常见的方法来实现小程序图片居中显示。

方法一：使用flex布局

flex布局是一种弹性布局模型，通过设置父元素的display为flex，并通过设置子元素的属性来实现图片居中显示。

1. 在wxml文件中，设置一个容器元素，给它设置class或者id属性：

2. 在wxss文件中，为容器元素设置样式：

.container {

display: flex;

justify-content: center;

align-items: center;

height: *;

}

使用flex布局，我们通过设置容器元素的display为flex，以及设置justify-content为center和align-items为center，即可实现图片居中显示。

方法二：使用position属性

另一种常见的方法是使用position属性来设置图片的居中显示。

1. 在wxml文件中，设置容器元素，并在其中添加image元素：

2. 在wxss文件中，为容器元素和image元素设置样式：

.container {

position: relative;

height: *;

}

.center-image {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%

-50%);

}

使用position属性，我们将图片容器元素设置为相对定位（position: relative），然后将图片元素设置为*定位（position: absolute），并使用top、left、transform属性将图片居中显示。

以上就是实现小程序图片居中显示的两种常见方法。根据具体需求，选择合适的方法进行使用。