[分享]css两行文字居中

在网页布局中，文字的居中对齐是一个非常常见的需求。本文将介绍如何使用 CSS 将两行文字居中。

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
} 

用这段 CSS 代码，可以使两行文字垂直和水平居中。这里的关键是使用了 flex 布局，将文字所在的元素设置为一个 flex 容器。通过 justify-content 和 align-items 指定居中的方式，其中 justify-content 控制水平方向上的居中，align-items 控制垂直方向上的居中。

在容器元素中设置 height: 100%，这将使容器高度占满整个父元素。同时，设置 text-align: center，从而使文字水平居中。

在 HTML 中，只需将需要居中的文字包裹在一个 div 中，将此 div 的 class 属性设置为 center 即可。

<div class="center">
  <p>第一行文字</p>
  <p>第二行文字</p>
</div> 

在现代浏览器中，以上代码可实现两行文字的居中对齐。若想要更多的文字居中方式，可在 CSS 中尝试其他 flex 布局的属性或者使用其他方式实现。