Using Flexbox is a powerful way to center an image within a container. It provides a clean and efficient solution to align items both vertically and horizontally.

Grid Method:

CSS Grid is another method for centering images. It allows for precise control over layout and alignment, making it ideal for complex designs.

Text Align Method:

For inline images, using text-align can be a simple solution. This method is best suited for images that behave like text elements.


      .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .grid-center {
        display: grid;
        place-items: center;
        height: 100vh;
      }

      .text-align-center {
        text-align: center;
      }

Flexbox Example:

The justify-content and align-items properties are used to center the image within the flex container.

Grid Example:

The place-items property is a shorthand for centering items both horizontally and vertically in a grid container.

Text Align Example:

This method centers the image within its parent container by treating it as text, aligning it according to the text-align property.

Console Output:

Image centered using Flexbox, Grid, and Text Align methods.