如何在Tailwind的div容器中实现按钮居中？

你的问题核心在于：<h2>和<p>是块级元素，text-center能让它们内部文本居中的同时，自身占满父容器宽度；但按钮默认是行内块元素，不会撑满父容器宽度，所以你之前用的items-center这类flex属性需要配合父容器的flex设置才生效，mx-auto也需要按钮转为块级元素才能起作用。

下面给你两种简单可行的解决办法：

方法一：给按钮添加块级元素+自动外边距类 #

直接修改按钮的class，添加block mx-auto，让按钮变成块级元素，通过左右自动外边距实现居中：

<div class="container py-10 px-10 mx-0 min-w-full" className="contactdiv">
  <h2 class="text-5xl text-white text-center">Contact Us</h2>

  <br />
  <p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
  <button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded block mx-auto">Learn More</button>
</div>

方法二：给父容器设置flex垂直布局 #

给外层div添加flex flex-col items-center类，让容器内所有子元素垂直排列并水平居中，按钮自然就会居中（此时可以去掉h2和p的text-center，因为flex布局已经能让它们居中）：

<div class="container py-10 px-10 mx-0 min-w-full flex flex-col items-center" className="contactdiv">
  <h2 class="text-5xl text-white">Contact Us</h2>

  <br />
  <p class="text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
  <button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded">Learn More</button>
</div>

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