Flex boxes center of page after max height

Question

I set a max width and height for my flex boxes for responsive pages. After it surpasses the max height and width the boxes no longer become positioned in the center of the page even though I have justify-content: center; on my .flex-container. What am I doing wrong here? Anything helps, thanks! CodePen

.flex-container {
    display:flex; justify-content: center;}

.flex-post { 
    background-color: #f1f1f1;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    flex: 1 0 auto;
    height:auto;
    max-height:270px;
    max-width:270px;}

.flex-post:before {
    content:'';
    float:left;
    padding-top:100%;}

.flex-post:hover { 
    background-color: rgba(1,1,1,0.5);}

<div>
 
</div>
<div class="flex-container">
    <div class="flex-post">1</div>
    <div class="flex-post">2</div>
    <div class="flex-post">3</div>
</div>
<div class="flex-container">
    <div class="flex-post">4</div>
    <div class="flex-post">5</div>
    <div class="flex-post">6</div>
</div>
<div class="flex-container">
    <div class="flex-post">7</div>
    <div class="flex-post">8</div>
    <div class="flex-post">9</div>
</div>

Answer 1

You need to center the containers.

Add this to your code:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100vh;
    margin: 0;
}

revised codepen

Note that block elements consume the full width of their parent, by default. This behavior, however, does not extend to height (more details).

Answer 2

.flex-post {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex: 1 0 auto;
  height: auto;
  max-height: 270px;
  max-width: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
}