we have different types of options are available to horizontally center an element in CSS, depending on the situation. We will look at those details one by one.

margin: auto:
Using margin: auto: using this method works if the element you want to center is a block-level element, and its parent has a defined width. You can set the element's left and right margins to auto,



.center {

  margin: 0 auto;

}


flexbox:
Using flexbox: You can use the display: flex property on the parent element, and then use the align-items: center and justify-content: center properties on the child element.



.parent {

  display: flex;

  align-items: center;

  justify-content: center;

}


grid :
Using grid : Similarly, you can use the display: grid property on the parent element and use place-items: center on the child element.



.parent {

  display: grid;

  place-items: center;

}


transform: translateX(50%):
Using transform: translateX(50%) method uses the CSS transform property to position the element in the horizontal center of its parent element. The translateX function takes the horizontal offset as a parameter, which is set to 50% to center the element.



.center {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

}


text-align:
If you would like to set a fixed width on the inner div you can use the code below one:



#outer {

  width: 100%;

  text-align: center;

}



#inner {

  display: inline-block;

}

The HTML code is,


<div id="outer">  

    <div id="inner">thelinuxfaq.com</div>

</div>