視圖容器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. }