[分享]css3文本多行居中显示

CSS3提供了很多便捷的功能，其中文本多行居中显示就是其中之一。这个属性非常有用，尤其在设计响应式页面时，它能够确保文本在不同设备上的显示效果一致性。 .container { display: fl...

CSS3提供了很多便捷的功能，其中文本多行居中显示就是其中之一。这个属性非常有用，尤其在设计响应式页面时，它能够确保文本在不同设备上的显示效果一致性。

 .container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .text {
    width: 80%;
    margin: 0 auto;
  } 

如上所示的代码，我们使用了CSS3的flexbox布局。我们通过将容器的display属性设置为flex，使其成为一个弹性盒子，并且通过align-items和justify-content属性将其内部元素在水平方向和垂直方向上居中对齐。

接着，我们设置text的宽度为80%并通过margin: 0 auto属性使其水平居中对齐。由于我们已经在容器上设置了text-align:center属性，因此我们无需在text中再次设置居中对齐。

现在，我们就可以将任意多行文本放在.text中，并且它们会在容器中竖直居中显示。这种方法不仅适用于文本，还适用于包含图像或其他元素的块级元素。