css 多行 居中显示 文字
导读：在开发网站的过程中，我们经常会需要让一个多行的文本块居中显示。那么在CSS中如何实现呢？首先，我们需要知道让行内元素居中显示是很容易的，只需要给容器设置text-align:center即可。但是对于多行文本呢？我们可以使用以下两种方法来实...
在开发网站的过程中，我们经常会需要让一个多行的文本块居中显示。那么在CSS中如何实现呢？首先，我们需要知道让行内元素居中显示是很容易的，只需要给容器设置text-align:center即可。但是对于多行文本呢？我们可以使用以下两种方法来实现。
方法一：使用display:table
我们可以将要居中的文本块包裹在一个div容器中，然后设置这个容器的display为table，将文本块的display设置为table-cell，并且设置vertical-align为middle。这样就可以让文本块在垂直方向上居中了。
示例代码如下：
div id="text-container">
div id="text">
p>
这是一段多行文本/p>
p>
第二行文本/p>
p>
第三行文本/p>
/div>
/div>
style>
#text-container{
display: table;
margin: 0 auto;
width: 80%;
/*可根据自己的需要进行调整*/}
#text{
display: table-cell;
vertical-align: middle;
}
/style>
方法二：使用flexbox
flexbox是CSS3中新增的属性，可以非常方便地对元素进行布局，其中包括垂直居中。
我们可以将要居中的文本块包裹在一个div容器中，将容器的display设置为flex，并设置align-items为center。这样就可以让文本块在垂直方向上居中了。
示例代码如下：
div id="text-container">
div id="text">
p>
这是一段多行文本/p>
p>
第二行文本/p>
p>
第三行文本/p>
/div>
/div>
style>
#text-container{
display: flex;
align-items: center;
margin: 0 auto;
width: 80%;
/*可根据自己的需要进行调整*/}
/style>
以上就是两种常见的方法，供大家参考。当然，还有其他方法来实现多行居中，有兴趣的同学可以自行查阅。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 多行 居中显示 文字
本文地址： https://pptw.com/jishu/540072.html