body { /* Ensures the body is at least the full height of the viewport (100vh) */ /* This allows the body to stretch if content exceeds the screen height */ min-height: 100vh; } .center-container { /* This is the key: it uses the viewport height unit (100vh) */ /* This immediately makes the div fill the screen height, regardless of the parent height, as long as the doesn't restrict it. */ height: 100vh; width: 100%; /* CSS Grid Centering */ display: grid; justify-items: center; /* Create a row track starting at 33% of the height */ grid-template-rows: 33vh auto; /* Set the item to start in the second row (the 'auto' row) */ grid-template-areas: "empty-space" "content-position"; } .content { padding: 20px; /* Connect the content to the grid area we defined */ grid-area: content-position; }