如何在引导程序中的div内垂直居中放置图像？

Question

In the first section have a p and an image. I would really like to know how to center them vertically.

<section id="banner">
    <div class="container text-center">
        <div class="row">
            <div class="col-md-6">
                <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>
            <div class="col-md-6 text-center">
                <img src="https://cdn.pixabay.com/photo/2017/08/18/00/23/computer-2653374_960_720.png" class="img-fluid" alt="">
            </div>
        </div>
    </div>
</section>

Answer 1

You can try this

<div class="col-md-6 d-flex justify-content-center align-middle">
     <img src="https://cdn.pixabay.com/photo/2017/08/18/00/23/computer-2653374_960_720.png" class="img-fluid" alt="">
</div>

Answer 2

You could try adding:

p, img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Copied from here

Answer 3

You need 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>

In bootstrap there are easy classes you can add that will configure any element into the flex container you need. It is very important to note that flexbox properties affect the flex container and the immediate child elements which become flex elements.

Add this class to the div that wraps the image and paragraph you want to have centered:

d-flex

That adds display: flex to the element and turns it into a flex container!

To have the flex items (the direct child elements) layout in a column, add this:

flex-column

That adds flex-direction: column to the element.

Finally, you need to center them, add:

align-items-center

That adds align-items: center . It really helps to understand each of these properties do but if you add all 3 you will get the desired layout. More reading:

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

My fav Flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/