Center an image in CSS

Centering an image using CSS is a common task, and fortunately, there are several easy ways to do it depending on the layout you’re working with. Here's how you can center an image both horizontally and vertically using different CSS techniques.

Horizontally Center an Image:

Using text-align: center;

 If the image is inside a block-level element like a :

1.  This works because images are inline by default.

Using margin auto (with display: block)

 2. This makes the image a block-level element and centers it within its container.

Vertically Center an Image:

 Flexbox Method

 Flexbox is a modern and responsive way to center elements both horizontally and vertically.

Grid Layout

Tips:

• Make sure the container has a defined height for vertical centering to work.
  
• Use responsive image styling (max-width: 100%) to keep layouts flexible.
  

These methods are all simple and effective—it just depends on your layout needs. Have a preferred way to center images? Let me know!