Flexbox无法集中Woocommerce Button

Question

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

继承人我已经尝试过的事情：

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

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

我没有使用flexbox工作，但没有响应，我需要学习更多的flexbox。

这是使用flexbox的结果：

有人可以帮忙吗？如果需要，这是网站：http://svidro.recifeimage.com/

Answer 1

- 您应该有一个<div>并且在其中<button> - <div>应该有这种风格

  display: flex;
  justify-content: center;

- 这是因为标签的内容有

justify-content: center;

只会以内容为中心 - 在这种情况下，您将<div>，其内容为<button>

Answer 2

你可以尝试使用相对定位结合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%);