Bootstrap 5 align a card on the screen centre, like: <center></center> used to-CodePudding

I am trying to align a card in the screen center.

This is what I have but it's not working:

<div >
    <div >
      <ul >
        <li >
          <a  aria-current="true" href="#">Active</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
    <div >
      <h5 >Special title treatment</h5>
      <p >With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" >Go somewhere</a>
    </div>
  </div>

How can I screen center the card in bootstrap 5?

CodePudding user response：

You can add mx-auto to the outer div. however, centering depends on the parent element. here is a little guide https://css-tricks.com/centering-css-complete-guide/

<div >
    <div >
      <ul >
        <li >
          <a  aria-current="true" href="#">Active</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
    <div >
      <h5 >Special title treatment</h5>
      <p >With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" >Go somewhere</a>
    </div>
  </div>

for centering with position:absolute bootstrap 5 uses position-absolute top-50 start-50 translate-middle Bootstrap 5 centering

<div >
    <div >
      <ul >
        <li >
          <a  aria-current="true" href="#">Active</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
    <div >
      <h5 >Special title treatment</h5>
      <p >With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" >Go somewhere</a>
    </div>
  </div>