实现最终效果
<!--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; /* 垂直居中 */
flex布局完整教程链接
