css3 显示两行文字居中显示

在CSS3中，我们可以使用flexbox来轻松地实现多个元素的居中对齐，包括两行文字的居中显示。

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.line {
    text-align: center;
}
    

上面的代码示例中，我们首先设置外层容器的display属性为flex，使其变成一个flex容器。然后，我们将flex-direction属性设置为column，表示元素的排列方向为垂直方向。接着，我们设置justify-content和align-items属性为center，分别表示在主轴和交叉轴上对齐方式均为居中对齐。

对于两行文字的居中显示，我们可以将它们分别放置在两个p标签中，并设置它们的text-align属性为center，如下所示：

div class="container">
    p class="line">
    这是第一行文字/p>
    p class="line">
    这是第二行文字/p>
    /div>
    

通过这种方式，我们可以轻松地实现两行文字的居中显示。

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