視圖容器view上設(shè)置

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

view相當(dāng)于div是一個(gè)視圖容器，傳統(tǒng)的方法實(shí)現(xiàn)div中文字的水平垂直居中是設(shè)置div的兩個(gè)屬性：text-align：center；和line-height：100%；即可實(shí)現(xiàn)div容器中內(nèi)容的水平垂直居中，那么今天我們來(lái)用flex彈性盒子來(lái)實(shí)現(xiàn)小程序中view視圖容器里面內(nèi)容的水平垂直居中，話不多說(shuō)，直接上代碼：

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屬性上設(shè)置一下三個(gè)屬性并不會(huì)實(shí)現(xiàn)子元素內(nèi)容的水平垂直居中，所以要格外注意 */
7.   /* display: -webkit-flex; */
8.   /* align-items: center; */
9.   /* justify-content: center; */
10. }
11. .section view{
12.   width: 200rpx;
13.   height: 100%;
14.   /* 得在需要讓內(nèi)容居中的元素上設(shè)置以下三個(gè)元素才會(huì)使里面內(nèi)容水平垂直居中*/
15.   display: flex;
16.   justify-content: center;
17.   align-items: center;
18. }
19. .section view:nth-child(1){
20.   background: red;
21.   /* 表示根據(jù)是否有剩余寬度進(jìn)行縮放 */
22.   flex: 1;
23. }
24. .section view:nth-child(2){
25.   background: orange;
26. }
27. .section view:nth-child(3){
28.   background: pink;
29. }