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