Comment puis-je centrer une image verticalement à l'intérieur d'un div dans bootstrap?

Vous avez besoin de flexbox.

<div class="col-md-6 d-flex flex-column align-items-center">
  <p class="promo-title">Incubamos tus ideas para dar vida a tus sueños</p>
  <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Lorem</a>
</div>

Dans bootstrap, vous pouvez ajouter des classes simples qui configureront n'importe quel élément dans le conteneur flex dont vous avez besoin. Il est très important de noter que les propriétés flexbox affectent le conteneur flex et les éléments enfants immédiats qui deviennent des éléments flex.

Ajoutez cette classe à celle divqui enveloppe l'image et le paragraphe que vous souhaitez centrer:

d-flex

Cela ajoute display: flexà l'élément et le transforme en un conteneur flexible!

Pour avoir la disposition des éléments flexibles (les éléments enfants directs) dans une colonne, ajoutez ceci:

flex-column

Cela ajoute flex-direction: columnà l'élément.

Enfin, vous devez les centrer, ajoutez:

align-items-center

Cela ajoute align-items: center. Cela aide vraiment à comprendre chacune de ces propriétés, mais si vous ajoutez les 3, vous obtiendrez la mise en page souhaitée. Plus de lecture:

Documentation Bootstrap flex: https://getbootstrap.com/docs/4.0/utilities/flex/

Ma ressource Flexbox préférée: https://css-tricks.com/snippets/css/a-guide-to-flexbox/