需要垂直居中元素的帮助

Question

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

以下是我的情况图片：

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

那么，我如何干净利落地确保我的内部蓝色div（绿色div内），也就是图像，以及“一些文字”和＃39;和黄色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;一起使用

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;