微信小程序之文字水平垂直居中

关于小程序文字水平居中有两个方法

一、用line-height和text-align

wxml:

1. <view class='aa'>
      <text class='bb'>水平垂直居中</text>
   </view>
   

    

wxss:

.aa{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb{
  width: 100%;
  height: 40px;
  line-height: 40px;    
  text-align: center;
  background: red;
  font-size: 14px;

}

 出来的最终效果

 line-height中的文本可以垂直居中，text-align设置为center可以水平居中

 

二、用flex布局解决问题

wxml:

<view class='aa'>
   <text class='bb'>水平垂直居中</text>
</view>

wxss:

.aa{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  font-size: 14px;

}

 出来的最终效果

 display设为flex后，align-items: center表示侧轴（纵轴）垂直，  justify-content: center表示主轴（横轴）垂直