What am I doing wrong that justify-content doesn't have the expected behavior?

Question

I want to put h1 and div one under the other in the center of the page. For this I've use the following CSS and HTML:

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}

h1 {
  display: flex;
  margin-block-start: 0;
  width: 40%;
}

.products {
  margin-top: 5rem;
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<!--
Commented because reactjs className does not work for snippet so replace by normal class

<div className="main">
  <h1>Products</h1>
  <div className="products">
  </div>
  -->
  
<div class="main">
  <h1>Products</h1>
  <div class="products">
  </div>

They are align to column but they are not centered.

Answer 1

When in column direction flex container, you need to use align-items: center for horizontal alignment.

.main {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: 100%;
}