css 两行居中对齐 |小程序模板引css失效

p {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100px; 
}

如上代码中，大家首先定义了一个p标签，在其中使用Flex布局，它可以使大家的双行文字居中对齐。其中，justify-content用于定义主轴上的对齐方式，这里大家使用了center，表示居中对齐。而align-items用于定义侧轴上的对齐方式，同样大家使用了center来居中对齐。flex-direction则表示主轴的方向为column，也就是从上到下排列。最后，给定一个固定高度，使得双行文字可以在容器中居中对齐。

在HTML中，大家将双行文字放入p标签中即可，如下所示：

<p>第一行
第二行</p>

通过以上的CSS布局，大家就可以轻松地实现双行文字的居中对齐了。值得一提的是，这种方式不仅适用于双行文字的居中对齐，还可以用于多行文字的居中对齐。只需要在CSS中将height值改为auto即可。