Html Flexbox无法使按钮居中

我正试图在我的woocommerce网站上集中一个按钮，但没有成功

以下是我已经尝试过的：

margin: auto;
float: none;
display: block;

display: flex;
align-items: center;
justify-content: center;

我在没有flexbox的情况下成功了，但没有响应能力，我需要学习更多flexbox

这是使用flexbox的结果：

---

有人能帮忙吗？如果需要，这是网站：

-你应该有一个

，里面是你的

-

应具有此样式

  display: flex;
  justify-content: center;

-这是因为标记的内容

justify-content: center;

将仅以内容为中心

---

-在这种情况下，您将拥有一个

，它的内容是

——您应该拥有一个

，其中包含您的

-

应具有此样式

  display: flex;
  justify-content: center;

-这是因为标记的内容

justify-content: center;

将仅以内容为中心

---

-在这种情况下，您将拥有

，其内容是

，您可以尝试使用相对定位与CSS变换相结合，而不是使用flexbox来居中按钮：

position: relative;
/* moves button to the middle of its container */
left: 50%;
/* moves button 50% of its width to the left */
transform: translateX(-50%);

---

您可以尝试使用相对定位与CSS变换相结合，而不是使用flexbox来居中按钮：

position: relative;
/* moves button to the middle of its container */
left: 50%;
/* moves button 50% of its width to the left */
transform: translateX(-50%);

---

谢谢，我不知道这件事。工作谢谢，我不知道这件事。工作使用已经完成的wordpress主题的坏处：（但是感谢帮助）使用已经完成的wordpress主题的坏处：（但是感谢帮助