微信小程序 居中布局css

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

居中示例

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

水平居中

wxml中放置一个view。

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

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

.flex-center-in-row {
  background: #eaeaea;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 40px;
}

垂直居中

垂直方向居中。

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

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

.flex-center-in-column {
  display: flex;
  align-items: center;
  height: 60px;
}

水平并且垂直居中

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

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

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

.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

更多阅读: 小程序开发记录