微信小程序view中用flex实现文字的垂直居中

视图容器view上设置

1. view{ display: flex; justify-content: center;align-items: center;}

view相当于div是一个视图容器，传统的方法实现div中文字的水平垂直居中是设置div的两个属性：text-align：center；和line-height：100%；即可实现div容器中内容的水平垂直居中，那么今天我们来用flex弹性盒子来实现小程序中view视图容器里面内容的水平垂直居中，话不多说，直接上代码：

1. //wxml
2. <view class='section'>
3.   <view>one</view>
4.   <view>two</view>
5.   <view>three</view>
6. </view>

 

1. //wxss
2. .section{
3.   height: 200rpx;
4.   display: flex;
5.   flex-direction: row;
6.   /* 在父元素view属性上设置一下三个属性并不会实现子元素内容的水平垂直居中，所以要格外注意 */
7.   /* display: -webkit-flex; */
8.   /* align-items: center; */
9.   /* justify-content: center; */
10. }
11. .section view{
12.   width: 200rpx;
13.   height: 100%;
14.   /* 得在需要让内容居中的元素上设置以下三个元素才会使里面内容水平垂直居中*/
15.   display: flex;
16.   justify-content: center;
17.   align-items: center;
18. }
19. .section view:nth-child(1){
20.   background: red;
21.   /* 表示根据是否有剩余宽度进行缩放 */
22.   flex: 1;
23. }
24. .section view:nth-child(2){
25.   background: orange;
26. }
27. .section view:nth-child(3){
28.   background: pink;
29. }