[分享]css两行文本剧中对齐

在CSS中，将文本居中对齐一直都是个比较棘手的问题。不过，在处理两行文本时，可以考虑使用以下代码将他们居中对齐：.container { display: flex; flexdirection: c...

在CSS中，将文本居中对齐一直都是个比较棘手的问题。不过，在处理两行文本时，可以考虑使用以下代码将他们居中对齐：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.container p:first-child {
  margin-bottom: 10px;
} 

以上代码中，我们在 .container 中使用了弹性盒子布局（Flexbox），将 display 属性设置为 flex，将子元素们垂直排列（flex-direction: column），并使用 justify-content 属性将内容以中心方式对齐。

同时，我们也将容器中的文本对齐方式设置为居中（text-align: center）。我们还通过使用 .container p:first-child 选择器，将第一行文本的下方空白设置为 10px，从而与第二行文本保持间距。

这样，只要将两行文本包裹在 .container 容器中，就可以轻松实现两行文本的居中对齐了。