display:table和display:table-cell结合使用

.GoodList{

display :table;

height :54px;

width :56px;

line-height: 14px

                padding: 0 12px

.text{

display: table-cell;

                width: 56px;

                vertical-align: middle;

                font-size: 12px;

                color: rgb(77, 85, 97); 

}

 

将父容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,就可以实现多行文字垂直居中

转载于:https://www.cnblogs.com/huanhuan55/p/9718481.html