Revision history [back]

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>