Tailwind CSS：PC端网格元素居中但iPhone Safari端不居中的问题求助

嘿，我刚上手Tailwind CSS，现在卡在这段代码上了——我做了一个包含三个元素的三列网格，也写了响应式的样式，在笔记本电脑上看一切正常，元素都是居中的，但在iPhone的Safari浏览器里，这些元素却靠左对齐了，肯定是我漏了什么配置……

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-3 gap-5">
  <div class="col-span-full md:col-span-1 text-black pb-10 justify-items-center">
    <i class="fi fi-br-marker text-3xl"></i>
    <h2 class="text-xl font-semibold">BASED ON</h2>
    <p class="text-base text-gray-700">Bogor, Indonesia</p>
  </div>
  <div class="col-span-full md:col-span-1 text-black pb-10 justify-items-center">
    <i class="fi fi-br-envelope text-3xl"></i>
    <h2 class="text-xl font-semibold">EMAIL</h2>
    <p class="text-base text-gray-700"><a href="mailto:alihaidersult@gmail.com">alihaidersult@gmail.com</a></p>
  </div>
  <div class="col-span-full md:col-span-1 text-black justify-items-center">
    <i class="fi fi-br-share text-3xl"></i>
    <h2 class="text-xl font-semibold">SOCIALS</h2>
    <div>
      <ul class="flex gap-2 pt-2">
        <li><a target="_blank" href="https://www.facebook.com/alihaisul"><i class="fi fi-brands-facebook text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.instagram.com/alihaisul"><i class="fi fi-brands-instagram text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.tiktok.com/@alihaisul"><i class="fi fi-brands-tik-tok text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.youtube.com/@alihaisul"><i class="fi fi-brands-youtube text-2xl"></i></a></li>
      </ul>
    </div>
  </div>
</div>

在PC端浏览器里，这三个元素都是居中显示的，但在iPhone的Safari里，它们却靠左排列了。有没有大佬能帮我看看这是为什么，该怎么解决这个问题呀？

PC端显示效果：三个元素均匀分布在网格中，内容整体居中对齐
iPhone Safari显示效果：三个元素堆叠排列，但内容整体靠左，没有居中

问题原因分析 #

你现在的代码里，给每个网格子元素加了justify-items-center，但这个类是作用在网格容器上的，用来控制网格项在水平方向的对齐，单独加在网格子元素上是不生效的。而且在移动端（iPhone属于小屏幕，对应Tailwind的md以下断点），你的网格是col-span-full，也就是每个元素占满一行，这时候需要让每个子元素的内容居中，应该用文本对齐或者flex/grid的居中类。

另外，Safari在处理某些CSS属性时会有一些兼容性细节，但核心问题还是类的使用位置不对。

解决办法 #

你可以这样修改代码：

1. 给最外层的网格容器添加justify-items-center，让所有网格项在水平方向居中；
2. 给每个网格子元素添加text-center（让文本类内容居中）；
3. 给社交图标所在的ul添加justify-center，因为它是flex容器，需要让子元素（图标）在水平方向居中。

修改后的代码示例：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!-- 给网格容器添加justify-items-center，确保所有网格项水平居中 -->
<div class="grid grid-cols-3 gap-5 justify-items-center">
  <div class="col-span-full md:col-span-1 text-black pb-10 text-center">
    <i class="fi fi-br-marker text-3xl"></i>
    <h2 class="text-xl font-semibold">BASED ON</h2>
    <p class="text-base text-gray-700">Bogor, Indonesia</p>
  </div>
  <div class="col-span-full md:col-span-1 text-black pb-10 text-center">
    <i class="fi fi-br-envelope text-3xl"></i>
    <h2 class="text-xl font-semibold">EMAIL</h2>
    <p class="text-base text-gray-700"><a href="mailto:alihaidersult@gmail.com">alihaidersult@gmail.com</a></p>
  </div>
  <div class="col-span-full md:col-span-1 text-black text-center">
    <i class="fi fi-br-share text-3xl"></i>
    <h2 class="text-xl font-semibold">SOCIALS</h2>
    <div>
      <ul class="flex gap-2 pt-2 justify-center"> <!-- 给ul添加justify-center让图标居中 -->
        <li><a target="_blank" href="https://www.facebook.com/alihaisul"><i class="fi fi-brands-facebook text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.instagram.com/alihaisul"><i class="fi fi-brands-instagram text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.tiktok.com/@alihaisul"><i class="fi fi-brands-tik-tok text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.youtube.com/@alihaisul"><i class="fi fi-brands-youtube text-2xl"></i></a></li>
      </ul>
    </div>
  </div>
</div>

这样修改后，不管是PC端还是iPhone Safari端，内容都会保持居中对齐啦～

内容来源于stack exchange