• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Image Centering

← Previous Next →

🔹 What is CSS Image Centering?

CSS Image Centering is the technique of aligning an image horizontally, vertically, or both, within its container. Proper centering improves the visual balance and layout design of webpages.

🔸 Methods to Center Images

1. Center Image Horizontally Using text-align
.container {
  text-align: center;
}
.container img {
  display: inline-block;
}

Works when the image is inline or inline-block.

2. Center Image Horizontally Using margin
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Sets auto margins on sides, works with block-level images.

3. Center Image Vertically and Horizontally Using Flexbox
.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  height: 300px;           /* container height required */
}

Flexbox centers the image both ways inside the container.

4. Center Image Vertically and Horizontally Using Grid
.container {
  display: grid;
  place-items: center;
  height: 300px;
}

CSS Grid shorthand for centering content in both directions.

5. Center Image Using Positioning and Transform
.container {
  position: relative;
  height: 300px;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Absolute positioning combined with transform to center the image.

Practice Questions

Q1. Center an image horizontally inside a div using text-align.

Q2. Center an image horizontally using margin: auto.

Q3. Center an image vertically and horizontally using Flexbox.

Q4. Center an image inside a fixed height container with Grid.

Q5. Center a small image absolutely in a relative container.

Q6. Center multiple images horizontally in a row.

Q7. Vertically center an image inside a div with unknown height using Flexbox.

Q8. Center an image and add a border-radius of 10px.

Q9. Center an image inside a modal popup using Grid.

Q10. Center an image responsively on smaller screens.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top