在微信小程序中可以放心地使用 flex 布局，所以尝试了一下 flex 的居中布局。
示例模板代码
<view class="nav_icon_wrapper">
<image src="../../images/phone.png" mode="widthFix"></image>
</view>
<view class="nav_text_wrapper">
<text>手机认证</text>
</view>
示例样式代码
只需要在父级元素上设置，不需要操作子元素。
.nav_icon_wrapper {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.nav_text_wrapper {
display: flex;
align-items: center;
}
align-items 与 justify-content 如何记忆
我发现这两个属性，我完全记不住，之前看过好多遍，每次用都要重新查。首先从词面意思上我就区分不开。
于是我采用了应付考试的死记方法：
- justify 这个单词，字母较多。所以是水平居中。
- align 字母较少。所以是垂直居中。。。
感觉这个方法太土鳖了。我最终 Google 了一下 "align justify diff"，没想到排名第一的答案居然是跟我出奇的一致。。。
老外英语也不行啊！
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式