Flexbox не работает для центрирования кнопки Woocommerce

Question

Я пытаюсь центрировать кнопку на моем веб-сайте woocommerce, но безуспешно.

Вот что я уже пробовал:

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

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

Iсделал это без flexbox, но не реагирует, и мне нужно узнать больше flexbox.

Это результат использования flexbox:

Может кто-нибудь помочь?при необходимости это веб-сайт: http://svidro.recifeimage.com/

Answer 1

Вы можете попробовать использовать относительное позиционирование в сочетании с 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%);

Answer 2

- у вас должен быть один <div>, и внутри него ваш <button> - <div> должен иметь этот стиль

  display: flex;
  justify-content: center;

- это потому, что содержимое тега имеет

justify-content: center;

будет центрировать только его содержимое - в этом случае у вас будет <div>, а его содержимое будет <button>