微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中

3 种居中方式， 在页面布局中经常用到， 现作一记录。

第一种   水平居中

类似这样写法

display:  flex;

flex-direction:  column;                //垂直布局

align-items:  center;                    // 水平居中    

justify-content:  space-around; //垂直方向分散布局

第二种  垂直居中

类似这样写法

display:  flex;

flex-direction: row;          //水平布局      

align-items: center;        // 垂直居中

第三种  水平垂直布局

可以是类似这样写法:

display: flex;

flex-direction: column;  // 垂直布局

align-items: center;        // 水平居中

justify-content:  center;  //垂直居中

width:   33%;                   //宽度占屏幕的1/3