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會有偏差，不會居中的問題。