html - 屏幕中间的 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>