How to horizontally center an element inside a div in HTML using CSS?

 To horizontally center an element inside a div in HTML, you can use the CSS text-align property on the parent div and set its value to center. This will horizontally center all inline and inline-block level elements inside the div.

Here's an example:

css
<div style="text-align: center;">
  <p>This text will be centered horizontally.</p>
  <img src="path/to/image.jpg" alt="Image" style="display: inline-block;">
</div>

In this example, we're setting the text-align property of the parent div to center, which horizontally centers all inline and inline-block level elements inside the div. We're also adding a p element and an img element inside the div. We're setting the display property of the img element to inline-block to make it an inline-block level element so that it can be horizontally centered.

Alternatively, you can use the CSS margin property to center a block-level element inside its parent container by setting the left and right margins to auto. This method is commonly used for centering block-level elements such as div, p, and h1-h6 tags.

Here's an example:

css
<div style="text-align: center;">
  <div style="margin: 0 auto; width: 50%;">
    <p>This block-level element will be centered horizontally.</p>
  </div>
</div>

In this example, we're using a div element as the child element of the parent div. We're setting the margin property of the child div to 0 auto, which sets the left and right margins to auto and centers the div horizontally within its parent container. We're also setting the width property to 50% to specify the width of the div.