利用CSS怎么让文字居中

记得上次在咖啡馆，盯着电脑屏幕数代码，咖啡凉了半杯。
那时候琢磨着怎么让网页上的文字稳稳当当地站中间，不偏不倚的。

你看那个div，4 00像素见方，黑边框框得牢牢的。
里面那句话"水平垂直居中文字"，像是被施了魔法，不管你怎么晃杯子，它都岿然不动。

水平垂直居中文字

设置的时候，先给它套个壳，4 00宽4 00高，自己不挪窝。
然后用margin: 0 auto;让它自己找中点，左右两边的外边距自动调整，稳稳当当立在那儿。
接着text-align: center;让里面的文字水平居中。
最绝的是line-height: 4 00px;，把行高设成和容器一样高，文字就像踩着一条看不见的线跳舞，上下也刚好对齐。

那天盯着那块黑色的正方形，看着里面的字不偏不倚，心里忽然想到，这和生活中挺像的。
就像排队，每个人自觉站在线两边，不推不挤，秩序井然。
等等，还有个事，要是里面文字特别长，比如一整段，会不会还是这么居中啊？

CSS按钮文字垂直居中技巧与常见陷阱

这个CSS按钮文字垂直居中的事儿，说起来可就复杂了。
当年我刚开始做网页设计那会儿，那可真是头都大了。
记得有一次，2 02 2 年在某个城市，一个项目量特别大，客户就要求按钮上的文字必须垂直居中，那时候我用的方法简单粗暴，就是给按钮加内边距，结果发现，哎呀妈呀，这内边距一加，文字就偏下了，小写字母x那地方空荡荡的，看起来就不好看。

后来我才反应过来，这内边距啊，它就是个坑，得去掉。
然后我就开始研究，研究了半天，发现这垂直居中啊，还得靠height和aspect-ratio来控制尺寸，这样就能保证按钮是正方形或者是圆形，看起来就舒服多了。
再后来，我就开始用Flexbox布局，这玩意儿一用，简直是如鱼得水，水平居中、垂直居中，都不在话下。

但问题又来了，这字符选择啊，也影响着视觉效果。
我以前就犯过一个错误，用小写字母x做关闭按钮，结果那文字就偏下，后来改用大写字母X，瞬间就好看多了。
还有啊，这line-height有时候也能派上用场，单行文本的话，把line-height设得和height一样，也能实现垂直居中。

这事儿啊，可能我偏激了点，但说实话，这CSS按钮文字垂直居中的确是个技术活儿。
你得研究字体、布局，还得注意兼容性，才能做得好。
我记得有一次，一个客户说，这按钮上的文字居中效果不好，我就告诉他，咱们得改用Flexbox，再换个大写字母，结果客户一看，哎呦，这效果可真好。
所以啊，这事儿啊，就得慢慢摸索，不能急。