利用CSS怎么让文字居中

怎么用CSS样式使文本居中对齐？

我记得有一次在一家咖啡馆，我看到我前面的桌子上有两个人。
一个一直看着手机，另一个一直看着对方。
手机屏幕的光反射在他的脸上。
他坐得笔直，但感觉歪了。
这时，老板走了过来，轻轻地将男人的水杯往前推了推。
男人无意识地指向了玻璃。
当杯子伸直时，看起来这个人是坐直的。

说起焦点，我在制作网页时总是很困惑。
使用文本对齐：居中；用于水平居中。
很容易理解，就是文字在方框内左右对称。
至于垂直居中，我尝试了几种方法。
请记住，在项目中，使用 line-height:3 0px;将高度设置为3 0px，然后使用vertical-align:middle;使文本居中。
一开始很奇怪，后来发现td单元格中的文本行高和单元格高度是一样的，所以文本是垂直居中的。
那是2 02 1 年，我在一家叫“云创科技”的小公司。
我不记得具体的项目了，但是 CSS 问题困扰了我大半天。

等等，还有一件事。
后来我尝试使用flexbox，发现它简单多了。
容器display:flex;，然后子元素justify-content:center;水平居中并对齐项目：中心；垂直居中。
全部通过一行代码完成。
那是 2 02 2 年，一个户外项目，客户要求快速流，而 Flexbox 是救星。

但是网格布局现在似乎又流行起来了。
使用网格模板列：1 fr；网格模板行：1 fr；将单元格拆分为 1 行 1 列，然后将 item-start 设置为居中。
这似乎又是一种转移，但兼容性可能会更好。
我突然想到，这些布局方式是不是类似于用铅笔画网格，边画边调整布局的思路呢？但现在已经在代码中实现了。

直接在 td 内键入 进行垂直居中。
这个方法现在看来有点老了。
但当时我使用 Dreamweaver 时，只需点击几下鼠标就可以进行可视化编辑，简单而原始。
那是2 01 9 年，我正在为一家大公司的甲方做一个项目。
整个团队都在这么做。
但现在 Dreamweaver 早已不复存在，一切都已转换为干净的代码。

等等，还有一个细节。
使用align=“center”或text-align：center的效果；几乎是一样的，不过第一个是td标签属性，第二个是CSS。
属性写在标签中，CSS 写在样式表中。
当时为了省事，有时直接写在标签里，有时写CSS。
有一个客户端测试。
如果页面使用align=“center”，IE浏览器会出现错误，文字会稍微向右偏移。
后来我用text-align:center;解决了。
那是2 02 0年，客户从事外贸。
老板脾气不好，一直在变。

现在想想，无论是居中还是分散，都是为了让东西看起来舒服。
就像那个咖啡杯一样，当你推动并引导它时，你似乎会冷静下来。
但有时如果你过于追求完美，你就会疲惫不堪。
就像实际的 Flexbox 一样，它很容易使用，但有时感觉还是很复杂。
不知道以后会不会有更简单的提交方式。

我们来谈谈，咖啡馆前面那张桌子上的人怎么了？