小程序view容器中文字上下居中、左右居中显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22520215/article/details/83031891

方法一、text-align、line-height

其中line-height的值必须等于容器的高度值。

.wxml

<view class='text_align' >水平居中</view>  
<view class='line_height' >垂直居中</view>
<view class='center' >水平居中||垂直居中</view>


.wxss

.text_align{
  width: 350rpx;
  height: 350rpx;
  background-color: gray;
  text-align: center;   /** 水平居中 **/
}

.line_height{
  width: 350rpx;
  height: 350rpx;
  background-color: orange;
  line-height: 350rpx;  /** 垂直居中 **/  
}

.center{
  width: 350rpx;
  height: 350rpx;
  background-color: brown;
  line-height: 350rpx;  /** 垂直居中 **/ 
  text-align: center;   /** 水平居中 **/ 
}

效果图如下：

方法二、display flexible box模型

.wxml

<view class='text_align' >水平居中</view>
<view class='line_height' >垂直居中</view>
<view class='center' >水平居中||垂直居中</view>

.wxss

.text_align{
  width: 350rpx;
  height: 350rpx;
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.line_height{
  width: 350rpx;
  height: 350rpx;
  background-color: orange;
  line-height: 350rpx;  /** 垂直居中 **/  
}
.center{
  width: 350rpx;
  height: 350rpx;
  background-color: brown;
  line-height: 350rpx;  /** 垂直居中 **/ 
  text-align: center;   /** 水平居中 **/ 
}

效果图：