想要的效果：
1554272360(1).jpg
問題：在移動(dòng)端小于12px的字體使用line-height無法使其垂直居中
DOM：<div class="record-status">兌換成功</div>
在網(wǎng)上找了多種方法
1、使用flex布局
display:flex;
justify-content:center;
align-items:center
結(jié)論：居中無效（可能跟dom有關(guān)系吧估灿，反正我這樣確實(shí)沒實(shí)現(xiàn)想要的效果）
2、使用padding
padding:v1 v2;
//通過padding把容器撐開
結(jié)論：無效
3卖氨、使用css3
思路：小于12px時(shí)無效坞淮，那就設(shè)置字體大小時(shí)先擴(kuò)大一倍当纱，即：設(shè)計(jì)稿12px嘀略，那么就設(shè)置font-size:24px,然后通過transform:scale(0.5)將其縮放一半
注意：針對(duì)這樣的DOM結(jié)構(gòu)恤溶，不止要字號(hào)擴(kuò)大乓诽，寬高同樣要擴(kuò)大，同時(shí)宏娄，還要注意縮放的基準(zhǔn)點(diǎn)问裕，設(shè)置transform-origin，否則位置會(huì)發(fā)生變化
結(jié)論：親測(cè)有效
