Align content center don't work on my columns [duplicate] - css

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I have this layout and css
<div class="container-fluid header">
<div class="row text-center">
<div class="col-md-6 red">
<h1>First</h1>
</div>
<div class="col-md-6 red">
<h1>Second</h1>
</div>
</div>
</div>
css
.header {
background-color: blue;
}
.col-md-6 {
min-height: 300px;
}
.red {
border:2px solid red;
}
i gave min-height on col 6 because i want to have extra space there.I center the text of the content of each column with text-center on the row. But i can't find a way to center the content of the columns vertically.
I tried for example
<div class="container-fluid header">
<div class="row text-center d-flex align-content-center">
<div class="col-md-6 red align-self-center">
<h1>First</h1>
</div>
<div class="col-md-6 red align-self-center">
<h1>Second</h1>
</div>
</div>
</div>
but without success

Answer 1

Bootstrap Utility Classes
You can center the contents of the column by adding the bootstrap utility classes d-flex, align-items-center and justify-content-center.
Raw CSS
These utility classes are just inline shorthand for:
some-element {
display: flex;
align-items: center;
justify-content: center;
}
Flex Explaination
When a flex container has direction row (default) then align-items handles the vertical alignment and justify-content handles the horizontal alignment.
I found this css-tricks post on flexbox super useful when I was still getting my head around flex layouts.
Example
.header {
background-color: blue;
}
.col-md-6 {
height: 300px;
}
.red {
border:2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid header">
<div class="row">
<div class="col-md-6 red d-flex align-items-center justify-content-center">
<h1>First</h1>
</div>
<div class="col-md-6 red">
<h1>Second</h1>
</div>
</div>
</div>

Answer 2

You need to be applying 'd-flex' to the div class="col".
By default, row is already a flexbox, but cols are NOT. It wasn't aligning the content because it isn't a flexbox until you give it the d-flex class.