¿Cómo puedo obtener texto debajo de la imagen en el centro de la imagen?

Quiero poner texto debajo de una imagen, pero debe estar horizontal en el centro de una imagen. No en el centro de la página, porque tengo 3 imágenes y quiero hacer lo mismo con ellas. ¿Alguien sabe una respuesta?

Esto es lo que tengo ahora. He jugado con los márgenes, pero como ves no queda perfectamente en el centro de una imagen. No conozco otra forma de hacerlo, sin jugar con los márgenes. ingrese la descripción de la imagen aquí

Este es mi código:

<section class="people">
        <h1>Our people</h1>
        <div class="putin">
            <img src="images/People/poetin.png" class="img1" alt="poetin">
            <p>Vladimir Putin</p>
        </div>
        <div class="stalin">
            <img src="images/People/stalin.png" class="img1" alt="stalin">
            <p>Joseph Stalin</p>
        </div>
        <div class="peter">
            <img src="images/People/peter.png" class="img1" alt="peter">
            <p>Peter the Great</p>
        </div>
    </section>

Y mi CSS:

.people {
    width: 100%;
    height: 60vh;
    background-color: #f1f1f1;
}



.people h1 {
    text-align: center;
    padding-top: 45px;
}

.putin p,
.stalin p,
.peter p {
    margin-top: 280px;
    margin-left: 17.66%;
    float: left;
    position: absolute;
    text-align: center;
    font-weight: bold;
}

.stalin p {
    margin-left: 47%;
}

.peter p {
    margin-left: 74.33%;
}

.img1 {
    float: left;
    height: 200px;
    width: auto;
    margin-left: 15%;
    margin-top: 60px;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.img1:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
Answer

Es extremadamente difícil posicionar todo utilizando valores px y márgenes, etc., y el resultado tiende a no responder.

En lugar de configurarlos, podría usar la cuadrícula CSS con el diseño definido como áreas de plantilla de cuadrícula.

En este fragmento simple, el área para el encabezado ocupa toda la primera fila, las áreas para las imágenes ocupan cada una un tercio de la segunda fila y la cuadrícula se presenta de manera que los elementos se justifican con "espacio alrededor". lo que significa que el espacio libre se distribuye uniformemente entre y al lado de los artículos.

.people {
  width: 100%;
  height: 60vh;
  background-color: #f1f1f1;
  display: grid;
  grid-template-areas: 'H H H' 'I1 I2 I3';
  justify-content: space-around;
}

.people h1 {
  text-align: center;
  padding-top: 45px;
  grid-area: H;
}

.putin {
  grid-area: I1;
}

.stalin {
  grid-area: I2;
}

.peter {
  grid-area: I3;
}

.putin p,
.stalin p,
.peter p {
  text-align: center;
  font-weight: bold;
}

.img1 {
  height: 200px;
  width: auto;
  cursor: pointer;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  border-radius: 50%;
}

.img1:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
<section class="people">
  <h1>Our people</h1>
  <div class="putin">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="poetin">
    <p>Vladimir Putin</p>
  </div>
  <div class="stalin">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="stalin">
    <p>Joseph Stalin</p>
  </div>
  <div class="peter">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="peter">
    <p>Peter the Great</p>
  </div>
</section>