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.
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,
margin: 0 auto;
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.
Using grid : Similarly, you can use the display: grid property on the parent element and use place-items: center on the child element.
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.
If you would like to set a fixed width on the inner div you can use the code below one:
The HTML code is,