?️ CSS Image Centering

⚡ Quick Overview

Centering images is a very common layout task in CSS. You can center an image horizontally using display: block with auto margins, or use display: flex on a parent container to center it both horizontally and vertically.

In this note, you will see how to:

Center a single image using block-level behavior and auto margins.
Use Flexbox to center images in both directions inside a container.
Understand when to use each method in real layouts.

? Key Concepts

Inline vs Block: Images are inline elements by default. To use auto margins, you first make them block-level.
Auto Margins: margin-left: auto and margin-right: auto share remaining space equally, centering the element.
Flex Container: A parent with display: flex can center its children along the main and cross axes.
Responsive Centering: Always combine centering with max-width: 100% to keep images responsive.

? Syntax & Code Patterns

? Method 1: Using `display: block` + Auto Margins

Turn the image into a block-level element and set left and right margins to auto. This centers the image horizontally inside its parent.

? View Code Example – CSS for Block-Centered Image

/* Center a single image horizontally using auto margins */
img.center-block {
display: block;
margin-left: auto;
margin-right: auto;
width: 250px;
max-width: 100%;
}

? View Code Example – HTML for Block-Centered Image

<!-- Image centered inside its parent block -->
<img
src="https://images.pexels.com/photos/3987066/pexels-photo-3987066.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Centered Block Image"
class="center-block"
/>

? Method 2: Using Flexbox on a Parent Container

Wrap the image in a container and turn that container into a flexbox. Then use justify-content: center and align-items: center to center the image horizontally and vertically.

? View Code Example – CSS for Flex-Centered Image

/* Flex container that centers its child image horizontally and vertically */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: #f0f0f0;
}

? View Code Example – HTML Structure with Flex Container

<!-- Parent flex container with a centered image inside -->
<div class="flex-container">
  <img
    src="https://images.pexels.com/photos/3987066/pexels-photo-3987066.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Flex Centered Image"
/>
</div>

? Live Output / Visual Demo

Block-Centered Image (Method 1)

The image below is centered horizontally using block display and auto margins.

Flex-Centered Image (Method 2)

The image is centered both horizontally and vertically inside the flex container.

? Tips & Best Practices

Use display: block with auto margins for simple horizontal centering of a single image.
Prefer Flexbox when you need both horizontal and vertical centering inside a container.
Always keep images responsive with max-width: 100% so they shrink on smaller screens.
Remember that text-align: center only centers inline or inline-block elements, not block-level elements like a block image.
When using Flexbox, make sure the container has enough height (e.g., via height or content) for vertical centering to be visible.
Different rules apply for horizontal vs vertical centering—be clear which one you are trying to achieve.

? Try It Yourself

Create an image and center it using display: block with margin-left: auto and margin-right: auto.
Wrap an image in a <div> and center it using Flexbox with justify-content: center and align-items: center.
Change align-items to flex-start and flex-end to see how vertical alignment changes inside the flex container.
Experiment with different container heights and background colors to clearly visualize how centering behaves.
Try adding multiple images inside the same flex container and see how they align relative to each other.