垂直居中解决方法：

方法1:table-cell+vertical-alignl

.parent{display:table-cell;vertical-align:middle;}

方法2：absolute+transform

.parent{position:relativee;}

.child{position:absolut;top:50%;transform:translateY(-50%);}

方法3：flex+align-items

.parent{display:flex;align-items:center;}

居中方法：

方法1：inline-block+text-align+table-cell+vertical-align

.parent{text-align:center;display:table-cell;vertical-align:middle;}

.child{display:inline-block;}

方法2：absolute+transform

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)；}

方法3：flex+justify-content+align-items

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