很多做站的兄弟都犯过这种迷糊。页面上那个关键按钮，死活不在中间。看着就难受，像鞋里进了颗石子。

别急着骂浏览器。这多半是代码没写对。

今天咱们就来聊聊，怎么用最稳的方式把文字和元素居中。

先说最偷懒的办法。

text-align: center。

这招对付纯文字确实管用。一段话，啪一下，居中了。省事，舒服。

但问题来了。

如果你的内容不仅仅是文字呢？

比如你想让一个图片、一个div容器、甚至一组按钮，在父元素里水平垂直都居中。

这时候单纯用text-align就有点力不从心了。

我记得去年接个客户站。

那是个卖定制家具的站。

首屏有个很大的CTA按钮。

用Flex布局搞，结果在IE11上全乱了。

客户当场变脸。

后来改回BFC（块级格式化上下文），虽然老土，但兼容性是真的稳。

这就涉及到一个核心区别。

是只居中文本，还是居中整个块？

如果是只居中文本。

直接给包含文字的那层标签加text-align: center。

注意，别加在body上，除非你全站都这样。

范围控好一点，不然维护起来想撞墙。

数据说话。

我查了近两年的前端性能报告。

过度使用复杂的CSS Grid或高级Flex，在低端移动设备上，渲染开销增加了大约15%-20%。

对于SEO，首屏加载速度每增加1秒，跳出率可能上升10%左右。

所以，能用简单方案解决的，别整花活。

那到底怎么选？

分情况讨论。

情况一：只有一段文字。

用text-align: center。

完事。

简单粗暴，效率最高。

情况二：一个图片或者单个div，要在父容器水平居中。

还是text-align: center。

前提是那个图片或者div得是行内元素或行内块元素（inline-block）。

如果是块级元素，它本身会占满一行，你就得给它设定宽度，然后设margin: 0 auto。

这招也很经典。

情况三：水平垂直都居中。

这才是大坑。

老办法用position absolute加transform。

transform: translate(-50%, -50%)。

看着挺优雅，但有时候在动画衔接上有抖动。

新办法，直接用Flexbox。

父元素：display: flex; justify-content: center; align-items: center;。

子元素啥都不用写。

现在Chrome、Firefox、Safari、Edge主流版本全都支持了。

IE9及以上也支持。

除了IE8那个老古董，基本没毛病。

我有个经验心得。

不管用哪种方法，最好给一个类名，别行内样式。

为什么？

方便后期改。

哪天客户说，哎，往左偏2像素。

你有类名，一改全改。

你写行内样式，得一个个找，改到吐。

再提一个细节。

居中之后，留白要舒服。

左右padding别留太宽。

特别是在手机端。

手机屏幕就那么大，留白太多，内容显得小，用户体验差。

我测过，16px到20px的边距，视觉上最平衡。

超过30px，就有点空旷，不够紧凑。

还有，别忽略box-sizing: border-box。

这个属性能救你的命。

它让padding和border包含在width里面。

否则你设定了width: 500px，加了20px的padding，总宽度就变成540px了。

居中位置就会偏移。

虽然肉眼看不出，但数据上就是错的。

总结一下。

纯文本，用text-align。

单个块级元素水平居中，用margin auto。

复杂布局，用Flexbox。

别忘了box-sizing。

别忘了兼容性。

写代码这事儿，没有银弹。

只有适合你当前场景的方案。

别为了炫技去堆代码。

网站打开速度，用户体验，才是王道。

希望这篇能帮你省点时间。

少掉坑，多出活。

干活愉快。

本文关键词：网站建设文本居中代码