I am making 2 rows. These rows will have buttons inside of them (10 each). I want these 2 rows to be in the middle of the page but not too close together.

I applied min-vh-50 on these 2 rows to aligned them in the upper-middle and the lower-middle. Both rows are part of the same container. However, the rows do not move and just stack upon each on the top of the page. They move only when I apply min-vh-100 but I want them to fit on the same page only.
Here’s my code (I just included some example buttons)-

  <div class="container-fluid">
    <div class="row d-flex justify-content-center align-items-center min-vh-50">
      <button class="btn btn-primary col-auto m-1">Primary</button>
      <button class="btn btn-secondary col-auto m-1">Secondary</button>
      <button class="btn btn-success col-auto m-1">Success</button>
      <button class="btn btn-danger col-auto m-1">Danger</button>
      <button class="btn btn-warning col-auto m-1">Warning</button>
      <button class="btn btn-info col-auto m-1">Info</button>
      <button class="btn btn-light col-auto m-1">Light</button>
      <button class="btn btn-dark col-auto m-1">Dark</button>
      <button class="btn btn-link col-auto m-1">Link</button>
      <button class="col-auto m-1">Normal</button>
    </div>

    <div class="row d-flex justify-content-center align-items-center min-vh-50">
      <button class="btn btn-outline-primary col-auto m-1">Primary</button>
      <button class="btn btn-outline-secondary col-auto m-1">Secondary</button>
      <button class="btn btn-outline-success col-auto m-1">Success</button>
      <button class="btn btn-outline-danger col-auto m-1">Danger</button>
      <button class="btn btn-outline-warning col-auto m-1">Warning</button>
      <button class="btn btn-outline-info col-auto m-1">Info</button>
      <button class="btn btn-outline-light col-auto m-1">Light</button>
      <button class="btn btn-outline-dark col-auto m-1">Dark</button>
      <button class="btn btn-link col-auto m-1">Link</button>
      <button class="col-auto m-1">Normal</button>
    </div>
  </div>

Can you give me a solution and explain why is this happening?