如何使用Tailwind CSS正确定位页面元素？

问题1：红圈文本页面居中 #

需求：让红圈中的标题、段落和图标在页面水平居中显示。

现有代码 #

<div> 
  <div class="pb-8"> 
    <div> 
      <h1 class="text-xl sm:text-3xl text-white md:text-4xl pb-6"> Student software development. </h1> 
    </div> 
    <div> 
      <div> 
        <p class="text-sm text-white md:text-base leading-relaxed slg:text-lg slg:leading-8"> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu eros vulputate, lobortis nulla a, lobortis libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam felis nunc, eleifend non dictum non, feugiat in risus. Pellentesque malesuada lacus eros, nec dapibus eros ornare ut. Vestibulum in efficitur mauris. Sed at vulputate augue, vel egestas ex. Nunc vel leo quis lacus bibendum laoreet. Phasellus iaculis, libero a vestibulum imperdiet, ex ipsum placerat nibh, in tempus felis ipsum quis felis. In porttitor mauris in nisl elementum, et porttitor sapien tempus. Morbi sit amet magna sed urna semper sollicitudin. Aliquam interdum quam ac nunc sollicitudin, quis ornare nisi faucibus. Etiam est mauris, tristique sed ipsum sed, pellentesque consectetur quam. Nunc vel mollis nisi. 
        </p> 
      </div> 
      <div class="flex pt-4"> 
        <div class="flex gap-4 h-20 w-20"> 
          <a href="#" target="_blank" title="GitHub"><img src="../../../data/icons/github.png"></a> 
          <a href="#" target="_blank" title="LinkedIn"><img src="../../../data/icons/linkedin.png"></a> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

修改后的代码 #

<div class="flex flex-col items-center mx-auto max-w-3xl"> 
  <div class="pb-8 text-center"> 
    <div> 
      <h1 class="text-xl sm:text-3xl text-white md:text-4xl pb-6"> Student software development. </h1> 
    </div> 
    <div> 
      <div> 
        <p class="text-sm text-white md:text-base leading-relaxed slg:text-lg slg:leading-8"> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu eros vulputate, lobortis nulla a, lobortis libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam felis nunc, eleifend non dictum non, feugiat in risus. Pellentesque malesuada lacus eros, nec dapibus eros ornare ut. Vestibulum in efficitur mauris. Sed at vulputate augue, vel egestas ex. Nunc vel leo quis lacus bibendum laoreet. Phasellus iaculis, libero a vestibulum imperdiet, ex ipsum placerat nibh, in tempus felis ipsum quis felis. In porttitor mauris in nisl elementum, et porttitor sapien tempus. Morbi sit amet magna sed urna semper sollicitudin. Aliquam interdum quam ac nunc sollicitudin, quis ornare nisi faucibus. Etiam est mauris, tristique sed ipsum sed, pellentesque consectetur quam. Nunc vel mollis nisi. 
        </p> 
      </div> 
      <div class="flex pt-4 justify-center"> 
        <div class="flex gap-4 items-center"> 
          <a href="#" target="_blank" title="GitHub"><img src="../../../data/icons/github.png"></a> 
          <a href="#" target="_blank" title="LinkedIn"><img src="../../../data/icons/linkedin.png"></a> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

修改说明 #

• 最外层容器加flex flex-col items-center mx-auto max-w-3xl：让内容块水平居中，同时限制最大宽度避免文本过宽。
• 内容容器加text-center：让标题和段落文本居中对齐。
• 图标容器去掉固定宽高h-20 w-20，换成items-center保证图标垂直居中；父容器加justify-center让图标组水平居中。

问题2：蓝圈列表在灰色区块内居中 #

需求：让灰色背景区块内的Frontend和Backend列表模块整体居中显示。

现有代码 #

<div class="grid grid-cols-2 pt-8 w-3/5 gap-6"> 
  <div class="flex p-6 gap-8 rounded-md bg-zinc-700 mb-8 text-white"> 
    <!-- Frontend --> 
    <div> 
      <h3 class="font-theme_bold text-base md:text-xl lg:text-2xl text-head_text"> Frontend </h3> 
      <ul> 
        <li class="flex p-2" v-for="frontend in skill.frontend" :key="frontend.id"> - {{frontend.name}} <img class="ml-2 max-h-6 max-w-6" :src="frontend.icon" alt="icon"> </li> 
      </ul> 
    </div> 
    <!-- Backend --> 
    <div> 
      <h3 class="font-theme_bold text-base md:text-xl lg:text-2xl text-head_text"> Backend </h3> 
      <ul> 
        <li class="flex p-2" v-for="backend in skill.backend" :key="backend.id"> - {{backend.name}} <img class="ml-2 max-h-6 max-w-6" :src="backend.icon" alt="icon"> <br> </li> 
      </ul> 
    </div> 
  </div> 
</div>

修改后的代码 #

<div class="grid grid-cols-2 pt-8 w-3/5 gap-6"> 
  <div class="flex justify-center p-6 gap-8 rounded-md bg-zinc-700 mb-8 text-white"> 
    <!-- Frontend --> 
    <div class="text-center"> 
      <h3 class="font-theme_bold text-base md:text-xl lg:text-2xl text-head_text"> Frontend </h3> 
      <ul class="flex flex-col items-center"> 
        <li class="flex items-center p-2" v-for="frontend in skill.frontend" :key="frontend.id"> - {{frontend.name}} <img class="ml-2 max-h-6 max-w-6" :src="frontend.icon" alt="icon"> </li> 
      </ul> 
    </div> 
    <!-- Backend --> 
    <div class="text-center"> 
      <h3 class="font-theme_bold text-base md:text-xl lg:text-2xl text-head_text"> Backend </h3> 
      <ul class="flex flex-col items-center"> 
        <li class="flex items-center p-2" v-for="backend in skill.backend" :key="backend.id"> - {{backend.name}} <img class="ml-2 max-h-6 max-w-6" :src="backend.icon" alt="icon"> </li> 
      </ul> 
    </div> 
  </div> 
</div>

修改说明 #

• 灰色背景容器加justify-center：让内部的Frontend和Backend模块水平居中。
• 每个模块容器加text-center：让标题文本居中。
• ul加flex flex-col items-center，li加items-center：让列表项的文本和图标垂直居中，同时整个列表在模块内水平居中。
• 移除li里的<br>标签，避免多余换行。

问题3：绿圈文本靠左对齐（黄线位置） #

需求：让"My projects"标题和描述段落靠左对齐，同时整体容器保持在页面居中。

现有代码 #

<div class="flex flex-col items-center pb-8 bg-zinc-800"> 
  <div class="items-start"> 
    <div class="flex flex-col pt-4 text-white"> 
      <h3 class="font-theme_bold text-base md:text-xl lg:text-2xl text-head_text">My projects</h3> 
      <p>Here are some of the projects I have worked on</p> 
    </div> 
  </div> 
</div>

修改后的代码 #

<div class="flex flex-col pb-8 bg-zinc-800"> 
  <div class="mx-auto max-w-3xl w-full"> 
    <div class="flex flex-col pt-4 text-white items-start"> 
      <h3 class="font-theme_bold text-base md:text-xl lg:text-2xl text-head_text">My projects</h3> 
      <p>Here are some of the projects I have worked on</p> 
    </div> 
  </div> 
</div>

修改说明 #

• 移除最外层容器的items-center：避免强制所有内容居中。
• 添加mx-auto max-w-3xl w-full的容器：让内容块水平居中，同时占满最大宽度。
• 文本容器加items-start：确保标题和段落靠左对齐，匹配参考图的黄线位置。

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