Div with border and font awesome icon won't center

I am trying to make a homepage of some sorts and I can't find a way to make a div center, I can't really explain it good so the picture might help The piece of code I'm trying to fix

I tried putting text-align: center; for the div but it only centered the text in the div, I wanted it to center the div just like the text above.

HTML: <script src="https://kit.fontawesome.com/0c86b13d40.js" crossorigin="anonymous"></script> <div> <p class="text title">My Info</p> </div> <div id="buttons"> <i class="fa-solid fa-house"> H o m e </i> </div>

CSS:

    .title {
      font-size: 350%;
      margin-top: 100px;
    }

    .text {
      text-align: center;
    }

    #buttons {
      text-align: center;
      width: 130px;
      border: 2px solid;
      padding: 10px;
      border-radius: 25px;
    }

Solution

CSS property margin: 0 auto; can be used to center a div horizontally. By setting the left and right margins to auto, the div will be centered horizontally within its parent container.

<div style="border: 1px solid black; width: 200px; margin: 0 auto; text-align: center;">
   <i class="fas fa-home"></i>
   <p>Some text</p>
</div>