实现最终效果
<!--index.wxml-->
<view class="body">
<view class="out">
<view class='in'>
<text>in</text>
</view>
</view>
</view>
/**index.wxss**/
.body{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.out {
width: 400rpx;
height: 300rpx;
background-color: blue;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.in {
width: 150rpx;
height: 100rpx;
background-color: red;
}
text{
font-size: 28px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
css将下面三行从text移动到in中依旧可以实现文字in居中
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */