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 >
    <div >
      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 >
      <div >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 >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.

CodePudding user response：

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 >
    <div >
      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 >
      <div >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 >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>

CodePudding user response：

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 >
    <div >Lorem, ipsum dolor sit ame...</div>
    <div >Lorem ipsum dolotiae!...</div>
    <div >Lorem ipsum ex commodi sunt!...</div>
  </div>
</main>

CodePudding user response：

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.