title: How do I center align the contents of a Container component in react-bootstrap?
body: <p>My container component looks like this:</p>
  <pre><code>&lt;Container className=&quot;contact-content debug-border&quot;&gt;
      &lt;Row className=&quot;justify-content-center&quot;&gt;
          &lt;Col md={2} className=&quot;text-center text-md-right&quot;&gt;
              Phone:
          &lt;/Col&gt;
          &lt;Col md={3} className=&quot;text-center text-md-left&quot;&gt;
              XXXXXXXXX
          &lt;/Col&gt;
      &lt;/Row&gt;
      &lt;Row className=&quot;justify-content-center&quot;&gt;
          &lt;Col md={2} className=&quot;text-center text-md-right&quot;&gt;
              Email-ID:
          &lt;/Col&gt;
          &lt;Col md={3} className=&quot;text-center text-md-left&quot;&gt;
              XXXXXXXXXXX
          &lt;/Col&gt;
      &lt;/Row&gt;
  &lt;/Container&gt;
  </code></pre>
  <p>My CSS is as follows:</p>
  <pre><code>.contact-content{
      height: 83vh;
  }
  
  .debug-border{
      border: 2px;
      border-style: dashed;
  }
  </code></pre>
  <p>What it looks like is this:
  <a href="https://i.stack.imgur.com/km1dU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/km1dU.png" alt="enter image description here" /></a>
  What I  want is the row and columns with the phone and email data to be shown in the middle of page</p>
  <p>What I tried out:</p>
  <p>I tried to add classes to the container:</p>
  <ul>
  <li>align-content-center</li>
  <li>align-items-center</li>
  <li>align-content-middle</li>
  <li>align-items-middle</li>
  <li>align-middle</li>
  <li>my-auto</li>
  <li>py-auto</li>
  </ul>
  <p>It brings no difference to the look of the webpage.</p>
  <p>I added padding:40vh to the contact-content css class and it worked but I want to know if there is any class in bootstrap that will align the rows and columns inside of the container to the middle of the page.</p>