嘿，我一眼就看出问题所在了——你的.hero容器确实设置了flex-direction: column; align-items: center，这让整个表单在页面中是居中的，但表单内部的按钮并没有被设置居中，所以它默认和左边的输入框对齐了。下面给你几个简单易实现的解决办法：

方法1：给按钮容器添加文本居中样式 #

你的按钮被包裹在div.button-center里，直接给这个容器加上text-align: center就能让按钮居中，因为提交按钮属于行内块元素，会继承容器的文本对齐方式：

.button-center {
  text-align: center;
}

方法2：给表单设置Flex布局（更推荐） #

如果你想让表单内的所有元素（输入框+按钮）都保持居中对齐，给表单容器添加Flex属性是更符合现代布局逻辑的做法，这样后续调整表单内元素的对齐方式也更灵活：

.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

加上这段代码后，你甚至可以删掉div.button-center这个容器，直接把按钮放在表单里，依然能保持居中。

方法3：直接给按钮设置自动外边距 #

如果你不想修改容器样式，也可以直接给按钮设置块级显示和左右自动外边距，强制让它在父容器中居中：

.sub-button {
  display: block;
  margin: 0 auto;
}

另外提个小细节：你的CSS里ul li重复写了两次display属性（display: inline;和display: flex;），删掉其中一个就好，不影响功能但代码会更整洁~

随便选一种方法测试一下，就能实现你想要的按钮居中效果啦！

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