HTML Flex. Center elements - html

Question

I need to center the elements of the column (like this:)
My actual code:
.education_flexColumn {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
flex-grow: 1;
}
.education_flexRow {
display: flex;
flex: 1;
justify-content: center;
align-items: stretch;
flex-grow: 1;
}
.divfh {
display: flex;
align-self: center;
flex: 1;
justify-content: center;
height: 100%;
flex-grow: 1;
}
<main>
<div class="education_flexRow">
<div class="education_flexColumn">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat voluptatum accusamus ipsum nulla, facere perspiciatis, quos quod, sint atque illum maiores iure. Excepturi harum quisquam iste ut esse ea non.
</div>
<div class="education_flexColumn">
<div class="divfh">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt id at dolore veniam illo ut et hic incidunt sit nostrum, laboriosam ipsa porro recusandae facere dolores. Laudantium amet placeat molestiae!</div>
<div class="divfh">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, voluptatem reprehenderit explicabo magnam totam animi neque aliquam? Iure, minima aut ducimus placeat aliquam mollitia ad tempora rerum ex commodi sunt!</div>
</div>
</div>
</main>
On my actual result, the 2nd column content is not centered align.

Answer 1

You need an align-items: center; on the .divfh. The align-self does nothing since you want to align the children:
html, body, main, .education_flexRow {
height: 100%;
}
.education_flexColumn {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid black;
}
.education_flexColumn > .divfh:first-child {
border-bottom: 1px solid red;
}
.education_flexRow {
display: flex;
justify-content: center;
align-items: stretch;
border: 1px solid black;
}
.divfh {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<main>
<div class="education_flexRow">
<div class="education_flexColumn">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat voluptatum accusamus ipsum nulla, facere perspiciatis, quos quod, sint atque illum maiores iure. Excepturi harum quisquam iste ut esse ea non.
</div>
<div class="education_flexColumn">
<div class="divfh">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt id at dolore veniam illo ut et hic incidunt sit nostrum, laboriosam ipsa porro recusandae facere dolores. Laudantium amet placeat molestiae!</div>
<div class="divfh">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, voluptatem reprehenderit explicabo magnam totam animi neque aliquam? Iure, minima aut ducimus placeat aliquam mollitia ad tempora rerum ex commodi sunt!</div>
</div>
</div>
</main>

Answer 2

If you don't mind the opportunity to slightly change your approach, I would suggest you to use the grid template layout.
Your current layout has problems when reducing the box contents and they don't align correctly anymore if their width didn't grow because of their content too small to fit the whole remaining horizontal space.
In this demo I just flattened the html structure so that the second column doesn't need anymore to be its own parent element and gave to the first .area item the class wide so that it will span 2 rows.
The content of the boxes will be centered both on the horizontal and vertical axes because of display: flex.
.areas {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 4rem; /*row min height*/
grid-gap: 5px; /*distance between boxes*/
}
.wide {
grid-row: span 2;
}
.area {
outline: solid 1px lightgray;
display: flex;
align-items: center; /*content centered vertically*/
justify-content: center; /*content centered horizontally*/
}
<main>
<div class="areas">
<div class="area wide">Lorem, ipsum dolor sit ame...</div>
<div class="area">Lorem ipsum dolotiae!...</div>
<div class="area">Lorem ipsum ex commodi sunt!...</div>
</div>
</main>