how to force row in container that is flex to center vertically in bootstrap 5-CodePudding

I have a bootstrap 5 container that needs to hold a dynamic grid of items that will eventually be widgets. Each of the same size. I need the contents of each widget to be centered vertically and horizontally within the widget itself. I use a row to allow the dynamic growth for number of widgets (each with a fixed height).

So far it is almost complete and working, but I can't figure out how to get the row to center vertically in the parent container. I have researched and attempted many solutions proposed on StackExchange but none seem to work in this scenario.

Current version:

<div >
    <div >
        <div >
            <div  style="height:300px; border: 5px solid red;">
                <div > Widget </div>
            </div>
            <div  style="height:300px; border: 5px solid red;">
                <div > Widget </div>
            </div>
            <div  style="height:300px; border: 5px solid red;">
                <div > Widget </div>
            </div>
            <div  style="height:300px; border: 5px solid red;">
                <div > Widget </div>
            </div>
            <div  style="height:300px; border: 5px solid red;">
                <div > Widget </div>
            </div>
            <div  style="height:300px; border: 5px solid red;">
                <div > Widget </div>
            </div>
        </div>
    </div>
</div>

How can I get the row inside the container to center vertically within the container?

bootply here: https://www.codeply.com/p/0Kg0YjFHEz

CodePudding user response：

The problem was caused by min-vh-100. Change it to vh-100 and add align-items-center h-100 to the row.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

<div >
  <div >
    <div  style="height:300px; border: 5px solid red;">
      <div > Widget </div>
    </div>
    <div  style="height:300px; border: 5px solid red;">
      <div > Widget </div>
    </div>
    <div  style="height:300px; border: 5px solid red;">
      <div > Widget </div>
    </div>
    <div  style="height:300px; border: 5px solid red;">
      <div > Widget </div>
    </div>
    <div  style="height:300px; border: 5px solid red;">
      <div > Widget </div>
    </div>
    <div  style="height:300px; border: 5px solid red;">
      <div > Widget </div>
    </div>
  </div>
</div>