Tailwind CSS logo居中问题求助：logo未真正居中如何解决？

嘿，我一眼就瞅出问题所在啦——你的父容器缺少了flex类！

Tailwind CSS里的justify-center是flex容器专属的对齐属性，只有给元素加上flex类（开启flex布局），这个对齐指令才会生效。你现在的父div只有flex-shrink-0和justify-center，但没开启核心的flex布局，所以justify-center根本发挥不了作用。

修正后的代码 #

<div class="flex flex-shrink-0 justify-center">
  <img class="h-64 w-64" src="../../assets/images/logo.svg" alt="Workflow logo">
</div>

如果还需要让Logo在垂直方向也居中，可以再补上items-center类：

<div class="flex flex-shrink-0 justify-center items-center">
  <img class="h-64 w-64" src="../../assets/images/logo.svg" alt="Workflow logo">
</div>

额外注意点 #

要是Logo还是看起来没对齐，你得检查父容器的宽度：

• 如果想让Logo在整个页面水平居中，父容器要加上w-full类，确保它占满可用宽度；
• 如果父容器是固定宽度的盒子，那居中就是在这个盒子范围内生效，这时候要确认容器宽度是否符合你的预期。

内容的提问来源于stack exchange，提问作者Marc Rasmussen