css下font垂直居中

在CSS中实现文字的水平居中相当容易，只需要使用 text-align 属性即可，在大部分场合中只要将其值设定为 center，就可以让文字水平居中。但是如果需要实现文字的垂直居中，则需要使用更复杂的方法。
在CSS中，要实现文字的垂直居中，有两种较为常用的方式。一种是通过将line-height属性设置为与父元素高度相同的值，从而让文字处于垂直居中的状态。
例如：

p{
    height: 100px;
    line-height: 100px;
} 

在上述代码中，通过将p元素的高度设置为100px，再将line-height属性设置为100px，从而实现了p元素内的文字垂直居中。
另一种实现垂直居中的方法是通过使用flexbox布局，将容器中的内容垂直居中。
例如：

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
} 

在上述代码中，通过设置父级容器的display属性为flex，再分别设置align-items和justify-content属性为center，从而实现了容器内内容的垂直居中。
需要注意的是，在实现文字的垂直居中时，因为不同浏览器对于line-height的处理方式不同，因此推荐使用flexbox布局方式实现垂直居中，以免造成兼容性问题。