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

Question

在第一部分中有一个p和一个图像。 我真的很想知道如何将它们垂直居中。

<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

你可以试试这个

<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

您可以尝试添加：

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

从这里复制

Answer 3

您需要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>

在引导程序中，可以添加一些简单的类，这些类将在所需的flex容器中配置任何元素。 请务必注意，flexbox属性会影响flex容器和成为flex元素的直接子元素。

将此类添加到div ，该wr包装您要居中的图像和段落：

d-flex

这就增加了display: flex到元素并将其变成flex容器！

要在列中包含弹性项目（直接子元素）布局，请添加以下内容：

flex-column

这会将flex-direction: column到元素。

最后，您需要将它们居中，然后添加：

align-items-center

这增加了align-items: center 。 确实有助于理解这些属性中的每一个，但是如果将所有3个属性相加，将获得所需的布局。 更多阅读：

Bootstrap Flex文档： https : //getbootstrap.com/docs/4.0/utilities/flex/

我最喜欢的Flexbox资源： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/