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会有偏差，不会居中的问题。