例:
<template><view class="flex align-center justify-center border" hover-class="bg-hover-light"style="height: 90rpx;width: 90rpx;" ><text class="iconfont font-md"><slot></slot></text></view>
</template>
使用排除法给每一个class都试着放justify-center,每放一个就保存看看效果,就发现第一个justify-center会从左上角到左中,再放一个justify-center会到正中。
<template><view class="flex justify-center" hover-class="bg-hover-light" @click="$emit('click')"style="height: 90rpx;width: 90rpx;"><text class="iconfont font-md flex justify-center"><slot></slot></text></view>
</template>
在自制的css样式库中大致这样:
/* 主轴居中对齐 */
.justify-center{justify-content:center;}
/* 交叉轴居中对齐 */
.align-center{ align-items:center; }