css样式文字垂直居中

在网页制作中，经常使用CSS样式来设置文字的排布方式，常见的就是文字的垂直居中。

CSS中提供了多种方法来实现文字垂直居中，以下我们将介绍其中两种。

/* 方法一：使用line-height属性 */.box{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.box p{
    display: inline-block;
    vertical-align: middle;
}

上述代码中，我们使用了line-height属性来设置文字的行高，使其与盒子的高度一致，从而实现垂直居中。同时通过display: inline-block和vertical-align: middle来设置p标签的显示方式和垂直对齐方式。

/* 方法二：使用Flex布局 */.box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.box p{
    text-align: center;
}
    

以上代码中，我们使用了Flex布局来实现文字的垂直居中。通过display: flex来设置Flex布局，使用justify-content: center和align-items: center来分别设置水平和垂直居中。同时，我们也通过text-align: center来设置p标签中文字的水平居中。

以上两种方法均可以实现文字的垂直居中，具体应用时，可根据实际情况选择合适的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！