How to align elements vertically center in header with flex [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 12 months ago and left it closed:
Original close reason(s) were not resolved
In my site header, I have 3 divs. For a logo, for search input and for a cart link. I want to align these 3 .col-md-4 divs vertically centered.
The divs have an align-items-center class, but it's not doing what I want, the divs arent centered vertically.
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
<img src="images/assets/logo.png" alt="" class="img-fluid"</a>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Keresés</button>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
<b>Kosár</b>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
I attach a photo of that how is the header looking now. The header has a grey border at its bottom.

Answer 1

align-items: center; is not enough to center vertically because you don't have the height defined. In other words, you have to define the header height as 100% of the page, if you want it to be centered vertically. See the example bellow:
body{
height: 100vh;
}
.header{
height:100%;
}
.container{
height: 100%;
}
.row{
height: 100%;
display:flex;
align-items: center;
}
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
<img src="images/assets/logo.png" alt="" class="img-fluid"</a>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Keresés</button>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
<b>Kosár</b>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

Answer 2

simple add to your flex container:
.row{
align-items: center;
}
Better if you find a more specific class (like add classname center and target .row.center)

Answer 3

your code is correct, the problem is that the row height is based on the tallest child element (logo div for example) so you need to set the row height and the elements will align . Codepen
.header .container .row {
height : 200px;
background-color : grey;
}