在css中如何用flex实现多行文字居中

嘿，Flexbox 非常容易使用，尤其是中心对齐。
我以前做过那个项目，2 02 2 年的时候，在一个叫杭州的城市，没错，是一个电商平台项目。
在许多地方，文本必须居中、多行。

当时我就想，怎么办？在尝试了多种方法之后，我最终发现Flexbox是最简单、最方便的。
瞧，你把步骤写得很清楚了。

首先要有一个灵活的容器。
我创建了一个名为 flex-center 的类，然后添加了 display:flex;给他。
这次，它变成了一个可以灵活布置的柔性容器。

然后，关键是居中。
为了使其水平居中，我使用 justify-content:center;。
这个很好理解，就是让里面的东西水平居中。
对于垂直居中，我使用align-items:center;。
这是使其垂直居中。

这样，基本上多行文本就很容易居中了。
但是，您还必须注意，有时文本可能是多行，而不是单行。
在这一点上，仅靠 Flexbox 可能还不够。
您需要添加 text-align:center;。
这是为了让文本本身在行中居中，这样每行都可以居中而不是向左或向右倾斜。

那么，你就得考虑一下这个容器。
它必须有高度，否则垂直居中将不起作用。
我为它设置了一个固定的高度，比如 height:2 00px;。
如果高度不够高，垂直居中确实会出现问题。
当时我就遇到了这种情况，这很烦人。
您需要确保容器有足够的空间。

此外，宽度也必须控制。
如果没有宽度限制，如果文字太长，可能会占满整个屏幕，不太美观。
我使用最大宽度：3 00px；这样即使文本很长，宽度也不会超过3 00px。
您还可以使用百分比，例如 max-width:8 0%;。

哦，对了，为了更好观察，我还加了一个边框，border:1 pxsolid ccc;。

接下来，您需要考虑响应式设计。
例如，在手机上，您可能希望内容垂直排列，因此您需要更改它并将弯曲方向设置为列。
我在杭州做项目的时候就遇到过这种情况，必须根据不同的设备进行适配。

另外，如果容器中有其他元素也需要Flex布局，则需要设置display:flex;单独使用这些元素，否则可能会发生继承错误。

看吧，只需几个步骤，这并不难。
关键是 justify-content:center;和对齐项目：居中；与 text-align:center; 结合。
这三者一起使用才能达到最佳效果。

有什么问题吗？

掌握text-align：HTML/CSS文本水平居中对齐详解

说白了，text-align是CSS中左右对齐文本的万能键，但如果使用不当，很容易陷入陷阱。

先说最重要的一点，文本对齐只关心块级元素（如div、p）中文本的排列方式，而不管这些块级元素如何站立。
去年我们运行H5 项目，发现当我们使用text-align:center使标题居中时，嵌套的span并没有移动。
当时我几乎以为这是一个错误。
还有一点就是要注意不要输入错误的值。
中间后面不能加引号。
“center”会报错。
还有另一个关键细节。
例如，创建响应式页面时，在容器中添加 width: 8 0% 和 margin: 0 auto 使整个 div 居中，那么 inside 的 text-align: center 就可以了。

一开始我以为textjustify可以像justify一样将两端对齐，后来发现justify让两边的文字填满容器，特别适合长文章。
等等，还有一件事。
如果块级元素本身没有宽度，则文本对齐根本不起作用。
这时候就得先靠margin:0 auto让它站稳了。

建议先尝试text-align:center，但记住块级元素必须使用margin:0 auto来居中。
不要单独依赖它。

css两行文字怎么居中左对齐的

创建一个测试。
包含以下内容的文件：

< lang> <头> <meta name =“viewport”content =“width = device-width，initial-scale = 1 .0”> <title>测试 Div 布局</title> <风格> .outer-div { 宽度：5 00px； 保证金：0 自动； 背景颜色：灰色； } .outer-div div { 宽度：1 00%； 文本对齐：居中； } .outer-div div:最后一个子项 { 文本对齐：左对齐； } </风格> </头> <正文>
第一行文本
第二行文本
</正文> </>
要点：
外部div的固定宽度为5 00px，并且居中。

所有文本均居中，第二行左对齐。

第二行单独设置为左对齐。