flex 布局文字对齐

图片和文字的中线对齐一直是一个头疼的问题。之前一直用flex布局做垂直居中对齐。

常用属性：

justify-content: flex-start | flex-end | center | space-between | space-around;
 /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/

flex布局多个子元素垂直居中

display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: center;
flex-direction : column;

盒子兼容

display:-webkit-flex;

属性兼容

-webkit-align-items:center;