css 字体上下居中显示 解决安卓手机line-height的偏差

  1、字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: 100%; height: 100px; border: 1px solid #526488 text-align: center; } 页面效果     2、字体上下居中显示 line-height: 100px;   .font{ width: 100%; height: 100px; border: 1px solid #526488 text-align: center; line-height: 100px; }   3、 如果不知道div高度，需要上下左右居中显示 <div class="font"> <span>上下左右居中</span> </div>   .font{ width: 100%; border: 1px solid #526488 text-align: center; display: flex; span{ display: flex; align-items: center; margin: 0 auto; height:100%; } }   display: flex; align-items: center; 这个方法的好处是兼容了安卓手机line-height会有偏差，不会居中的问题。

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。