Tailwind CSS 无法实现搜索栏在父div中居中问题咨询

问题根因 #

• 给父div添加flex、justify-center后搜索栏收缩，和flex嵌套无关，是因为搜索栏所在的子div仅设置了max-w-md，没有声明宽度占满父容器可用空间，flex容器的直接子元素默认宽度由内容撑开，因此出现收缩。
• text-center无效是因为该属性仅作用于行内、行内块元素的文本对齐，你的搜索栏是块级元素，无法通过该属性实现自身居中。

解决方案 #

方案1：基于flex布局实现

给外层父div添加flex justify-center，同时给搜索栏所在子div添加w-full保证宽度不会异常收缩：

<div className="flex justify-center">
   <div className="flex items-center w-full max-w-md shadow rounded border-0 p-3">
       <input type="search" className="flex-grow py-2" placeholder="Search by name..." />
       <i className="fas fa-search flex-grow-0 py-2 px-2" />
   </div>
</div>

方案2：更简洁的自动边距实现

不需要修改外层父div，直接给搜索栏所在的子div添加mx-auto，块级元素指定最大宽度后设置水平自动边距即可自动水平居中：

<div>
   <div className="flex items-center mx-auto max-w-md shadow rounded border-0 p-3">
       <input type="search" className="flex-grow py-2" placeholder="Search by name..." />
       <i className="fas fa-search flex-grow-0 py-2 px-2" />
   </div>
</div>

内容的提问来源于stack exchange，提问作者S.M