本文链接

居中放置元素是一个比较常见的需求。
可以水平居中,垂直居中。同时水平和垂直居中等等。
Android的RelativeLayout中,可以使用android:layout_centerInParent="true"
在小程序中我们该怎么做呢?

居中示例

下面列举几个居中的例子。

水平居中

wxml中放置一个view。

1
2
3
<view class="flex-center-in-row">
Rust Fisher 水平方向居中
</view>

wxss中的class。使用了flex布局,设置justify-content: center;

1
2
3
4
5
6
7
.flex-center-in-row {
background: #eaeaea;
display: flex;
flex-direction: row;
justify-content: center;
height: 40px;
}

水平居中效果图

垂直居中

垂直方向居中。

1
2
3
<view class="flex-center-in-column">
Rust Fisher 垂直方向居中
</view>

确定它的高度,设置display: flex; align-items: center;

1
2
3
4
5
.flex-center-in-column {
display: flex;
align-items: center;
height: 60px;
}

垂直居中效果图

水平并且垂直居中

要居中,需要确定宽和高。

1
2
3
<view class="flex-center-in-cube">
Rust Fisher 方块内居中
</view>

需要设置flex布局,justify-content: center; align-items: center;

1
2
3
4
5
6
7
.flex-center-in-cube {
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}

水平并且垂直居中效果图

小结

从上面的几个例子我们可以看出,它们都用了flex布局。
垂直居中需要设置align-items: center;
水平居中需要设置justify-content: center;

工程放在: https://github.com/AnRFDev/tutorial-miniprogram

更多阅读

小程序开发记录