Метод 1: использование CSS Flexbox
Один из самых простых и наиболее широко используемых методов центрирования элементов — использование CSS Flexbox. Вот пример того, как вы можете центрировать кнопку изображения с помощью Flexbox:

<div class="container">
  <button class="image-button">Click Me</button>
</div>

center;
align-items: center;
/* дополнительные стили для контейнера, если необходимо */
}
.image-button {
/* дополнительные стили для кнопки если необходимо */

Метод 2: применение CSS Grid
CSS Grid — еще одна мощная система макетирования, которая позволяет легко центрировать элементы. Вот пример центрирования кнопки изображения с помощью CSS Grid:

<div class="container">
  <button class="image-button">Click Me</button>
</div>

.container {
  display: grid;
  place-items: center;
  /* additional styles for the container if needed */
}
.image-button {
  /* additional styles for the button if needed */
}

Метод 3: использование абсолютного позиционирования и преобразования
В некоторых случаях может потребоваться центрировать кнопку изображения точно внутри элемента

<div class="container">
  <button class="image-button">Click Me</button>
</div>

.container {
  position: relative;
  /* additional styles for the container if needed */
}
.image-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* additional styles for the button if needed */
}

<div class="container">
  <button class="image-button">Click Me</button>
</div>

.container {
  text-align: center;
  line-height: /* set the same height as the container */;
  /* additional styles for the container if needed */
}
.image-button {
  display: inline-block;
  /* additional styles for the button if needed */
}