Search code examples
htmlcssflexbox

HTML Flex. Center elements

I need to center the elements of the column (like this:)

enter image description here

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.

enter image description here

Solution

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