What is the approach to utilizing CSS to keep row1 centered and dock row2 to the bottom?

edit

One approach to keeping row1 centered and docking row2 to the bottom using CSS is by using a combination of flexbox and absolute positioning.

First, create a container div and set its display property to flex. This will allow us to use flexbox to center row1 horizontally and vertically within the container.

<div class="container">
  <div class="row1">
   <!-- content of row1 -->
  </div>
  <div class="row2">
   <!-- content of row2 -->
  </div>
</div>

<style>
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   flex-direction: column;
   position: relative;
 }
</style>

Next, set the position property of row2 to absolute and the bottom property to 0. This will dock row2 to the bottom of the container.

<style>
 .row2 {
   position: absolute;
   bottom: 0;
 }
</style>

Here's the complete code:

<div class="container">
  <div class="row1">
   <!-- content of row1 -->
  </div>
  <div class="row2">
   <!-- content of row2 -->
  </div>
</div>

<style>
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   flex-direction: column;
   position: relative;
 }
 .row2 {
   position: absolute;
   bottom: 0;
 }
</style>