微信小程序的页面布局通常采用flex布局，通过设置`style`属性中的`display: flex;`和`align-items: center;`来实现垂直居中。以下是一个简单的示例，展示如何在微信小程序中实现页面垂直居中布局：
1. 首先，在`app.json`文件中添加一个页面路径，例如`pages/index/index`，并设置`style`属性中的`backgroundColor`为`#f0f0f0`，以便在开发过程中更好地看到效果：
```json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#f0f0f0"
}
}
```
2. 接下来，在`index.wxml`文件中编写页面结构：
```html
```
3. 在`index.wxss`文件中设置样式：
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #fff;
}
.title {
font-size: 36rpx;
color: #333;
}
```
4. 在`index.js`文件中编写逻辑：
```javascript
Page({
goBack() {
this.$router.goBack();
},
});
```
5. 最后，运行小程序，查看效果。在开发过程中，可以通过调整`index.wxml`文件中的`class`属性来改变页面的样式，以实现不同的布局需求。
川公网安备51015602000223号
