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