CSS文本居中：文本对齐与Flex布局详解

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS文本居中：使用文本对齐与Flex布局实现》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

text-align: center 仅对块级容器内的行内内容有效，对块级子元素无效；居中块级元素应使用 display: flex + justify-content: center。

text-align: center 为什么有时不生效

直接给元素加 text-align: center 只对**行内内容（如文字、span、img）有效**，前提是该元素本身是块级容器（比如 div、p），且其宽度明确或占满父容器。常见失效场景包括：

• 目标元素是 inline 或 inline-block，没设宽度，又没撑开父容器
• 想居中的是块级子元素（如另一个 div），text-align 对它无效
• 父容器用了 display: flex，此时 text-align 被忽略

用工具类实现水平居中：class="text-center"

主流 CSS 工具库（如 Tailwind、Bootstrap）的 text-center 就是封装了 text-align: center。它适合纯文本或行内元素居中：

.text-center {
  text-align: center;
}

使用时只需加在包裹文字的容器上：

<div class="text-center">
  <p>这段文字会居中</p>
  <span>这个 span 也会居中</span>
</div>

注意：如果里面有个 div 子元素，默认仍左对齐——它不受 text-align 影响，得单独处理。

用 flex 实现真正意义上的内容居中（含块级子元素）

当你要居中的不只是文字，而是按钮、卡片、图标组等块级结构时，display: flex + justify-content: center 才是可靠方案。对应工具类通常是 flex justify-center（Tailwind）或 d-flex justify-content-center（Bootstrap）：

.justify-center {
  justify-content: center;
}

.flex {
  display: flex;
}

关键点：

• 必须同时设置 display: flex（或 inline-flex），否则 justify-content 无意义
• 只加 justify-content: center 仅控制**主轴**（默认为水平）居中；垂直居中需额外加 align-items: center
• 若子元素是单个块级元素（如 div），它会被拉伸填满剩余空间——除非你设了 flex: none 或 width

示例（水平+垂直居中一个卡片）：

<div class="flex justify-center items-center h-screen">
  <div class="bg-gray-100 p-4">居中的卡片</div>
</div>

text-center 和 justify-center 混用的典型错误

很多人会这样写：