屏幕中间的flexbox中心图像

Question

大家好，有一个简单的问题，在 bootstrap 3 中使用 flexbox，我似乎无法将我的图像放在屏幕中间，我得到了它，所以它在中间，但现在它在顶部屏幕而不是中心：

HTML：

    <div class="parallaxb">
            <div class="homeimgbarber">
            <img class="img-responsive" src="img/cuts.png" style="margin: auto;">
              </div>
  </div>

CSS：

.parallax {
    background-image: url("../img/c.png");
    min-height: 1000px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homeimgbarber {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 1

这是因为 .homeimgbarber 需要应用高度。

.parallax {
    background-image: url("http://via.placeholder.com/350x150");
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homeimgbarber {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

   <div class="parallaxb">
            <div class="homeimgbarber">
            <img class="img-responsive" src="http://via.placeholder.com/350x150">
              </div>
  </div>