felx 布局实现居中对齐

<view class="container">
  <view class="top">
    <view class="text">签到/view>
  </view>
  <view class="bottom">
    <view class="text">签退</view>
  </view>
</view>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

注意：这里要用的是 align-items 属性，align-items属性定义项目在交叉轴上如何对齐。

这里使用 justify-content:center; 无法实现居中对其的效果。

完整 CSS 代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.top {
  height: 400rpx;
  width: 400rpx;
  background-color: #ffa07a;
  margin-top: 50rpx;
  border-radius: 50%;
}

.bottom {
  margin-top: 100rpx;
  height: 400rpx;
  width: 400rpx;
  background-color: #adff2f;
  border-radius: 50%;
}

.text {
  height: 400rpx;
  width: 400rpx;
  line-height: 400rpx;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  color: #fffff0;
}

效果图：

Flex 布局教程