如何在带有h-screen工具类的居中div下方添加新div并维持原居中状态？

嘿，我懂你的需求啦——原来的div已经完美在屏幕居中了，现在想在它下面加个新div，但又不想破坏原本的居中效果对吧？这其实很容易调整，咱们只需要稍微改一下结构就行～

先看看你原本的居中效果：

你的核心问题在于外层的h-screen flex容器是直接把内部内容整体居中的，直接加新元素会打乱这个布局。咱们可以通过以下几步修改：

• 给外层容器添加flex-col类，让内部元素从横向排列改为垂直排列
• 把原来的居中内容（包含标题、渐变文本和按钮的div）单独作为一个独立块
• 在这个块下方添加新div，用margin类（比如mt-8）控制和上方内容的间距

修改后的完整代码如下：

<div class="flex items-center justify-center h-screen flex-col"> <!-- 新增flex-col类 -->
  <!-- 原来的居中内容，保持不变 -->
  <div class="main-content">
    <h1 class="text-6xl font-medium">sample</h1>
    <div class="greeting2 text-[100px]">
      <h2 class="text-gradient font-semibold">Lorem Ipsum</h2>
    </div>
    <a
      href="#"
      class="animate-fade transition-colors bg-primary hover:bg-primary/90 h-10 inline-flex items-center justify-center px-6 py-2 border-0 rounded-full text-sm font-medium text-white bg-gradient-to-l from-blue-500 to-purple-600 shadow-lg hover:from-purple-500 hover:to-blue-600 mt-0"
    >
      See More
    </a>
  </div>
  <!-- 新增的下方div，可自定义样式 -->
  <div class="mt-8 p-4 bg-gray-100 rounded-lg">
    <p>这是新增的下方内容</p>
  </div>
</div>

这样调整后，原来的标题和按钮依然会保持在屏幕的垂直水平中心，新增的div则会稳稳地落在它的正下方，你可以根据需求调整mt-8的数值来改变间距大小，完全不会影响原有的居中效果哦～

备注：内容来源于stack exchange，提问作者2leizy