需要帮助垂直居中元素

Question

我知道这里有很多关于如何垂直居中 div 的问题和答案，但我尝试了太多，但都没有奏效，有些似乎很复杂，所以我只需要有经验的人帮助知道最简单有效的解决方案。

下面是我的情况图片：

红色外部 div、内部左绿色 div 和内部右蓝色 div 都具有引导程序 pull-left 类。

那么我如何干净地确保我的内部蓝色 div（在绿色 div 内）也是一个图像，以及“一些文本”和作为按钮的黄色 div 都垂直居中，就像在图片。

这是 html（已编辑）：

<div class="pull-left user-info">
    <div class="pull-left profile-image-wrap">
        <img class="profile-image" src="~/Content/Images/user.png" />
    </div>
    <div class="pull-left user-desc">
        <h1>Bok <strong>@Model.Korisnik.Ime</strong>!</h1>
        <button type="button" class="btn btn-default">Nova uplata</button>
    </div>
</div>

CSS：

.user-info {
    display: flex;
    border: 1px solid black;
    margin-top: 25px;
}

.profile-image-wrap {
    display: flex;
}

.profile-image {
  height: 70px;
  margin-right: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

.user-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

结果如下：

Answer 1

您可以在父级和垂直居中的内容上使用flex，将flex 与flex-direction: column; align-items: center; justify-content: center; 一起使用

.user-info {
    display: flex;
    border: 1px solid black;
    margin-top: 25px;
}

.profile-image-wrap {
    display: flex;
}

.profile-image {
  height: 70px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.user-desc, .profile-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="user-info">
  <div class="profile-image-container">
    <img class="pull-left profile-image" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div class="user-desc">
    <h1>Bok <strong>@Model.Korisnik.Ime</strong>!</h1>
    <button type="button" class="btn btn-default">Nova uplata</button>
  </div>
</div>