Posted on | by liu
在CSS中，居中字体在设计中是一个常见的需求。通过一些简单的技巧，可以使字体在在元素中水平和垂直居中。
首先，大家来考虑在元素中垂直居中字体的方法。为了实现这个效果，大家可以使用line-height属性将元素的高度设置为与其字体大小相同的值。例如，如果字体大小为16px，可以将元素的line-height设置为16px，这样就可以使字体在元素中垂直居中。
示例代码如下：
p {
height: 16px;
line-height: 16px;
font-size: 16px;
}上述代码将p元素的高度和line-height设置为16px，字体大小也设置为16px。这将使p元素中的内容垂直居中。
接下来，大家来考虑在元素中水平居中字体的方法。为了实现这个效果，大家可以使用text-align属性将元素的文本内容水平居中。例如，大家可以将p元素的text-align属性设置为center，这样就可以使字体在元素中水平居中。
示例代码如下：
p {
height: 16px;
line-height: 16px;
font-size: 16px;
text-align: center;
}上述代码将p元素的高度、line-height、字体大小和text-align属性都设置为16px和center。这将使p元素中的内容在水平方向上居中。
最后，如果大家要同时将字体在元素中水平和垂直居中，大家可以将上述两种方法结合起来。示例代码如下：
p {
height: 16px;
line-height: 16px;
font-size: 16px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}上述代码将p元素的高度、line-height、字体大小、text-align、display、align-items和justify-content属性都设置为16px和center。这将使p元素中的内容同时水平和垂直居中。
综上所述，可以使用line-height属性垂直居中字体，使用text-align属性水平居中字体，使用display、align-items和justify-content属性同时水平和垂直居中字体。