移动端不居中问题/安卓和ios下line-height上下居中 css兼容问题

 1、伪类的方法解决

.test{width:0.6rem;height:0.3rem;line-height:0.3rem;text-align:center;color:#bababa;font-size:0.13rem;background:#f7f7f7;border-radius:0.15rem;}
.test::before{ content: '';display: inline-block;vertical-align: middle;width: 0;height: 100%;margin-top: 1px;}

2、table布局，在元素外面在包一层

<div class='test'>
    <span>测试</span>
</div>

.test{display:table}
.test span{background:pink;font-size:11px;display:table-cell;vertical-align:middle;}

3、

<div class="test">测试</div>

.test{height: 40px;background:pink;line-height: 40px;font-size: 20px;transform: scale(0.5);transform-origin: 0% 0%;}

4、不用行高line-height，用padding

<div class='test'>测试</div>

.test{line-height:normal; padding:10px 0;}

5、利用flex布局

<div class='test'><span>测试</span></div>

.test{display:flex;height:1rem;align-items:center;}
.test span{transform:scale(0.5);transform-origin:left center;}