• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Image Centering Quiz

Q1: Which CSS property centers inline images horizontally inside a container?

A. margin: auto;
B. text-align: center;
C. display: block;
D. float: center;

Q2: How to center a block image horizontally?

A. margin-left: auto; margin-right: auto;
B. text-align: center;
C. float: center;
D. position: center;

Q3: Which display type is used for flexbox centering?

A. block
B. flex
C. inline
D. grid

Q4: Which flexbox property centers items vertically?

A. justify-content
B. align-items
C. flex-direction
D. flex-wrap

Q5: How to center content with CSS Grid?

A. grid-template-columns: center;
B. place-items: center;
C. grid-auto-flow: center;
D. justify-content: center;

Q6: What does transform: translate(-50%, -50%) do in centering?

A. Moves element to top-left
B. Moves element down and right
C. Moves element back by half width and height
D. Moves element off screen

Q7: Which method requires the container to have a fixed height?

A. text-align
B. margin: auto
C. Flexbox or Grid centering
D. Absolute positioning without height

Q8: What positioning is needed for absolute centering?

A. static
B. relative container + absolute child
C. fixed container
D. sticky child

Q9: How to horizontally center multiple images in a row?

A. Use float: center
B. Use flex container with justify-content: center
C. Use margin: auto on images
D. Use grid-template-columns only

Q10: Which is NOT a valid centering technique?

A. Flexbox
B. Grid
C. Text-align
D. float: center;
← Previous Next →
Login
Go Back Top