遇到的问题明明设置了line-height = height，但在H5页面里文字并没有居中。

 

原因：因为line-height是两条基线之间的距离，当元素高度和font-size差距较大时，会出现不居中的情况。

 

解决方案

 

1. 通过放大再缩小的方法，并不适用于所有情况。

 

.serve{

 

  width: 100px; 

 

  height: 40px;

 

  line-height: 40px;

 

  font-size: 24px;

 

  text-align: center;

 

  transform: scale（0.5）;

 

}

 

2. 利用伪元素，有些情况下并不起作用。

 

.serve{

 

  width: 50px; 

 

  height: 20px;

 

  font-size: 12px;

 

  text-align: center;

 

}

 

.serve::after {

 

    content: '';

 

    display: inline-block;

 

    width: 0;

 

    height: 100%;

 

    vertical-align: middle;

 

    margin-top: 4px;  // 这个值不固定，需要根据自身情况调整

 

}

 

3. 使用flex，个人觉得有点大材小用。

 

.serve{

 

  width: 50px; 

 

  height: 20px;

 

  display: flex;

 

  align-items: center;

 

  font-size: 12px;

 

  text-align: center;

 

}

 

4. 直接将全局的lang设置为zh即可，个人觉得此方法最简单快捷且有效。