Центр изображения после обрезки

Question

Я обрезал изображение, используя клип, а затем использовал тот же идентификатор «изображение», чтобы сделать его более точным, центрируя изображение на странице, но, похоже, не смог заставить его работать. Я попытался использовать приведенный ниже код и другие методы, но все еще не могу получить его по центру. Я предполагаю, что использование идентификатора снова не допустит дальнейших изменений?

#title {
  text-align: center;
  font-size: 45px;
}

#image {
  object-fit: cover;
  Height: 400px;
  Width: 400px;
  position: absolute;
  Clip: rect(20px, 674px, 1050px, 0px);
}

/*tried code below no luck getting it centred after cropping */
#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#img-caption {
  position: relative;
  top: 400px;
}

<main id="main">
  <h1 id="title"> FLowers </h1>
  <figure id="img-div">
    <img id="image" src="https://live.staticflickr.com/4010/4680763568_0987b8f0a0_c.jpg" alt="single red flower" />
    <figcaption id="img-caption">
      Red Flower.
    </figcaption>
  </figure>

веб-страница с изображением, расположенным слева вместо центра

Answer 1

figure {
   display: flex;
   justify-content: center;
}

делает свое дело. Если вы хотите немного очистить код, вы можете переписать его так:

#title {
   text-align: center;
   font-size: 45px;
}

#image {
   object-fit: cover;
   height: 400px;
   width: 400px;
   clip: rect(20px, 674px, 1050px, 0px);
}

figure {
   display: flex;
   flex-direction: column;
   align-items: center;
}