How to vertically align blocks

Question

I have hard time vertically centering my blocks. If you take a look to my code , test1 block is aligned with block catA catB catE catF but test2 block isnt with its respective top blocks.

html :

<div class="homepage-wrapper">
    <div class="homepage-top-category-container">
        <div class="homepage-top-category-container-title">
            <span id="homepage-top-category-container-title">Most popular aisles</span>
        </div>
        <div class="homepage-top-category-container-list">
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catA
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catB
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catC
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catD
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catE
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catF
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catG
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catH
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="homepage-banner-grid-wrapper">

    <div class="homepage-banner-grid">

        <div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
            test1
        </div>

        <div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
            test2
        </div>

        <!--<div class="home-page-banner-grid-items" id="home-page-banner-grid-item3">*******
            test3
        </div>
    </div>****** -->

</div>

css here :

a {
    text-decoration: none;
}
body {
    margin: 0px;
}
.homepage-wrapper {
    max-width: 1078px;
    margin-left: auto;
    margin-right: auto;
}
.homepage-top-category-container-title {
    color: #808080;
    margin-top: 15px;
    padding: 15px 0 15px 0;
    font-weight: bold;
    letter-spacing: -1px;
}
#homepage-top-category-container-title {
    color: ##808080;
    margin-left: 22px;
}
.homepage-top-category-container-list {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.homepage-top-category-container-list > div {
    margin-left: 22px;
    margin-bottom: 22px;
}
.homepage-top-category-container-item {
    display: block;
    float: none;
    width: auto;
    height: auto;
    border: solid 1px #d0d0ce;
    position: relative;
    border-radius: 3px;
}
#homepage-top-category-container-item {
    width: 240px;
    height: 360px;
}
.homepage-top-category-container-item:hover {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    -moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
}
.homepage-top-category-container-item-btn {
    background-color: #cde5d9;
    color: black;
    position: absolute;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #d0d0ce;
    border-bottom: 2px solid #d0d0ce;
}
.homepage-banner-grid-wrapper {
    background-color: yellow;
    width: 100%;
    height: auto;
}
.homepage-banner-grid {
    max-width: 1078px;
    height: auto;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.home-page-banner-grid-items {
    width: 506px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#home-page-banner-grid-item {
    background-color: red;
    margin-left: 22px;
/*
#home-page-banner-grid-item1 {
    background-color: red;
}
#home-page-banner-grid-item2 {
    background-color: green;
}
#home-page-banner-grid-item3 {
    background-color: orange;
}
*/ 

My goal is to align test2 block under its respective blocks , so it will look just like how test1 block is aligned under its respective blocks.

I will appreciate some corrections and/or enhancements of my code.

jsfiddle here --> https://jsfiddle.net/r0gLo9cp/

Many thanks for your help.

Answer 1

Are you missing your closing div on the bottom? Looks like flex should take care of the centering for you, if you are looking for them to be listed in a column, make sure you use flex-direction: column; in the parent container ( homepage-banner-grid ).

Answer 2

That will fix it add flex-direction like thesoorae said

.homepage-banner-grid {
max-width: 1078px;
height: auto;
display: flex;
flex-direction:column;
align-items: center;
margin-left: auto;
margin-right: auto;
}