微信小程序的view标签中text如何居中？

一个常见的问题，我们在view中加入text。

 <view class="position">
    <text>{{position}}</text>
 </view>

基本的样式如下.

  .position{
  	width:100% ;
  	height: 100px;
  	display:flex;
  	align-items:center;    /*垂直居中 */
 	justify-content:center;    /* 水平居中 */
}

这里显示的效果如下:

                                             谢谢鉴赏

多个文本垂直居中对齐

     display: flex;//布局横向
     justify-content: center;//纵向居中
     align-items: center;//横向居中
     flex-direction: column;//纵向排列

      text-align: center; //文本居中对齐

      margin: 10px 0;  //上下10px,左右0px

      width: 100%;  //横向占满宽度

      position: fixed; //固定位置

      toFixed(2)  //保留两位小数

      height: 100vh;/* 100vh占满空间 */

       flex: 1;/*占满空间 */
       overflow-y: auto;/* 超出隐藏*/

多个文本横向对齐

        display: flex;
        justify-content: space-around;  //布局贴边

单文本对齐方式

         display: flex;
          flex-direction: column; //纵向排列
          align-items: center;//横向居中
          justify-content: space-around;//分散对齐

 .panel-title {
      line-height: 45px;//行高
      padding-left: 10px;//左间距
      font-size: 15px;//字体大小
      border-bottom: 1x solid #F4F4F4;//底部分隔线
    }

.panel-list-item{
    display: flex;
    justify-content: space-between;
    align-items: center;//纵向上居中对齐
    font-size: 15px; //字体15像素
    padding: 0 10px;//上下0 左右10px
    line-height: 45px;//行高
  }

.history-title {
    display: flex;  //左右对齐
    justify-content: space-between; //靠边对齐
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef; //添加一个像素的下划线

    display: block; //让内容保持间隙
   }