如何使用 flexbox 在 div 中垂直居中内容 [重复]

Question

所以我试图将我的图像和按钮放在我的 container-1 div 的第一个和最后一个 div 中。但是，它似乎不想居中，我不明白为什么。我很想知道为什么它不居中以及如何将其居中。

.container-1 {
  display: flex;
}

.container-1 div {
  border: 1px #ccc solid;
  padding: 10px;
}

.container-1 .body {
  flex-grow: 1
}

.container-1 .box-img img {
  align-items: center;
  height: 75px;
}

.container-1 .box-button button {
  align-self: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">

  <div class="box-img">
    <img src="https://images.squarespace-cdn.com/content/5c2aec4b1137a6d8849debf1/1589482673361-JFOXBM38XYSJQ9MUBEDW/image-asset.jpeg?format=1000w&content-type=image%2Fjpeg" />
  </div>

  <div class="body">
    <h3>Title</h3>
    <p>Description</p>
  </div>

  <div class="box-button">
    <button class="btn btn-primary">Button</button>
  </div>

</div>

Answer 1

基本上，你想使用：

display: flex;
align-items: center;

在父元素上。这将使孩子们垂直居中。

看看下面的工作代码。

.container-1 {
  display: flex;
}

.container-1 div {
  border: 1px #ccc solid;
  padding: 10px;
}

.container-1 .body {
  flex-grow: 1
}

.box-img {
  display: flex;
  align-items: center;
}
.box-img img {
  height: 75px;
}

.box-button {
  display: flex;
  align-items: center;
  
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">

  <div class="box-img">
    <img src="https://images.squarespace-cdn.com/content/5c2aec4b1137a6d8849debf1/1589482673361-JFOXBM38XYSJQ9MUBEDW/image-asset.jpeg?format=1000w&content-type=image%2Fjpeg" />
  </div>

  <div class="body">
    <h3>Title</h3>
    <p>Description</p>
  </div>

  <div class="box-button">
    <button class="btn btn-primary">Button</button>
  </div>

</div>