(Bootstrap 4: Flexbox) How do I center a div vertically between two others

(Bootstrap 4: Flexbox) How do I center a div vertically between two others
0.0 0

#1

How do I center a div vertically between two others on a responsive website, without pushing the lower div down? I also want the div to be placed at the left side.
Here you can see, that I have centered a div between the bottom edge of the navbar and the bottom edge of the screen:

The div I want to center between the navigation bar and the above div is visible on the top left corner.

I have played around a little with Flexbox, but haven’t managed to get the wanted result:

    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top">
    </nav>
<!-- Not important here -->
</header>

<body>

<!-- This is the div that I want to center verically between the navigation bar and the div bellow-->
**<div class="flex-wrap">**
**    <div class="flex-centered">**  
**        <h1 id="headLine">Let us exam your Git repositories</h1>**
**    </div>**
**</div>**

<div id="gitForm">
    <div class="Aligner">
        <div class="container h-100 d-flex justify-content-center">
            <div class="col-md-6">
                <div class=card>
                    <div class="card-block">
                        <form>
                            <div class="form-group">
                                <label id="nameLabel" for="projectNameInput">Name your
                                    project</label>
                                <input type="text" class="form-control" id="projectNameInput"
                                       placeholder="A project name you can live with">
                            </div>

                            <div class="form-group">
                                <label id="gitLabel" for="repoInput">Enter your Git
                                    repository</label>
                                <input type="text" class="form-control" id=repoInput
                                       placeholder="A valid Gitrepo...">
                            </div>
                            <button class="btn btn-outline-success" id="submitRepo"
                                    onclick="storeRepo()"
                                    type="submit">
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

And the CSS:

.navbar {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    font-family: "Abril Fatface";
    font-size: 20px;

}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
/* I am trying to center a div between the navigation bar and div "gitForm, with .flexwrap and .flex-centered*/
.flex-wrap {
    width: 400px;
    height: 400px;

    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    align-items: center;
}
.flex-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* #headLine is the id of the text that is placed inside the div that I am trying to center.*/
#headLine {

    font-family: "Abril Fatface";
    background-color: rgba(0, 0, 0, 0.8);
    display: inline-block;
    padding: 1%;
    color: #ffffff;
    border-radius: 25px;
}


#nameLabel, #gitLabel {
    color: #ffffff;
}
/* I am using aligner to center the div in the middle of the screen.*/
.Aligner {
    display: flex;
    align-items: center;
    min-height: 90vh;
    justify-content: center;
}

.Aligner-item {
    flex: 1;
}
.card {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 25px;

}