项目不能位于中心，对于移动模拟器，但在桌面和开发工具中，效果很好，nuxt3，tailwind

Question

我使用 nuxt3 和 tailwind ，问题是它在我的电脑上运行良好，当我从 devtools 制作移动浏览器时，但问题是当我从自己的手机打开我的网站时，我发现所有的东西都不带物品-center 与 tailwind 配合可以在任何计算机或平板电脑上正常工作，并且还有 css 样式：align-items:center;那么我该如何解决这个问题，这是第一次遇到这样的问题，如果我在计算机中测试我的响应，一切都会正确，那么为什么它在手机中显示这样，这是来自配置的错误nuxt 还是什么？为什么对齐项目或使事物居中的风格不适用于手机模拟器，

---

主要问题：

对于此代码：

<button class="button"> {{ $t("SIGN_UP.CREATE_ACCOUNT.TEXT_12") }} </button>

.button { background: red; }

手机和电脑的区别：

其他组件：

这是我的组件之一：
这是这一行的代码：

<template>
  <div class="flex items-center gap-1 self-start">
    <small class="error-mark" :class="error ? '' : 'correct-mark'">!</small>
    <small :class="error ? 'thatek-orange-dark' : 'thatek-green'">{{ message }}</small>
  </div>
</template>

<script setup>
defineProps(["error", "message"]);
</script>

<style lang="scss" scoped>
@import "@/assets/scss/variables";
.error-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $thatek_orange_very_light;
  background: $thatek_orange;
  width: 15px;
  height: 15px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
}
.correct-mark {
  background: $thatek_green;
}
</style>

**还有这个盒子的另一个代码：**


这是它的代码：

<template>
  <nuxt-link :to="goToContactSection" class="flex items-center gap-2 justify-center service-box p-2 rounded-lg" :class="{ 'flex-row-reverse': !rightToLeft }">
    <p class="font-bold">[email protected]</p>
    <img src="@/assets/images/envelope-green.svg" alt="envelope logo" />
  </nuxt-link>
</template>
<style lang="scss" scoped>
@import "@/assets/scss/variables";
.service-box {
  background: $thatek_grey_light;
  border: 1px solid $thatek_grey_medium;
}
</style>

我使用这个模块“nuxt-purgecss”，我认为它来自于此，但我删除了它，但没有发生任何事情， 唯一有效但不适合我的所有代码的解决方案： 我使填充顶部的值大于填充底部，但此解决方案不适用于我的所有组件，因为有些组件仅采用 Flex 和 items-center 和 justify-center。

Answer 1

最后我从我使用的字体类型中发现了问题，即 Tajwal，当我将其更改为其他字体时，一切正常。