React项目Flexbox容器内h2与button元素无法居中如何解决

问题根因 #

你当前.searchsearch容器的justify-content属性设置为space-between，该属性会让flex子项在容器内两端对齐分布，所以h2会贴在50%宽度容器的左边缘，button贴在右边缘，自然无法实现你要的居中效果。

解决方案 #

分两种常见需求场景提供修改方案：

场景1：h2和Search按钮紧挨、整体水平居中 #

直接修改.searchsearch的样式即可，把justify-content: space-between替换为justify-content: center，用gap属性控制两个元素的间距：

.searchsearch{
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center; /* 替换原有的space-between */
  gap: 24px; /* 自定义两个元素的横向间距，不需要可以删除 */
  margin: auto;
}

如果不需要限制搜索区域的宽度为50%，可以直接删掉width: 50%配置，容器宽度会自适应内容，配合margin: auto也能直接实现整体居中。

场景2：h2在页面正中间、button在h2右侧靠边 #

可以配合定位实现：

.searchsearch{
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: relative;
}
/* 单独给搜索按钮加绝对定位，固定在容器右侧 */
.searchsearch > button {
  position: absolute;
  right: 0;
}

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