<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 布局教程