CSS Advanced
CSS Image Centering
Centering an image is one of the most common layout tasks in CSS. This guide shows the reliable modern techniques for horizontal, vertical, and true dead-center alignment, each with a live example you can run.
Centering Images in CSS
An image is an inline element by default, so it sits on a text baseline and does not respond to left/right margins the way a block element does. The trick to centering is usually to change how the image participates in flow, then apply an alignment rule to the container or the image itself.
Horizontal Centering With margin: auto
The classic method is to make the image a block element and give it automatic left and right margins. The browser then splits the leftover horizontal space equally, pushing the image to the middle.
img {
display: block;
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html>
<head>
<style>
.card {
background: #f1f5f9;
padding: 24px;
border-radius: 12px;
}
.card img {
display: block;
margin: 0 auto;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card">
<img src="https://picsum.photos/200/120" alt="Sample" width="200" height="120">
</div>
</body>
</html>margin: auto only centers a block-level element that has a defined or intrinsic width. It will not center an inline image, so the display: block line is essential.
Centering With text-align
Because an image is inline by default, you can treat it like text. Setting text-align: center on the parent container centers the image horizontally without changing the image itself.
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
text-align: center;
background: #eef2ff;
padding: 20px;
}
.wrap img { border-radius: 8px; }
</style>
</head>
<body>
<div class="wrap">
<img src="https://picsum.photos/180/100" alt="Sample" width="180" height="100">
</div>
</body>
</html>Dead-Center With Flexbox
Flexbox is the most flexible modern approach. Two properties on the container, justify-content and align-items, center a child on both axes at once. Give the container a height so vertical centering has room to work.
<!DOCTYPE html>
<html>
<head>
<style>
.stage {
display: flex;
justify-content: center;
align-items: center;
height: 220px;
background: #0f172a;
border-radius: 12px;
}
.stage img { border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
</style>
</head>
<body>
<div class="stage">
<img src="https://picsum.photos/160/160" alt="Sample" width="160" height="160">
</div>
</body>
</html>Dead-Center With Grid (Shortcut)
CSS Grid offers the shortest true-center recipe: display: grid plus place-items: center centers a single child on both axes in just two lines.
.stage {
display: grid;
place-items: center;
height: 220px;
}| Method | Axis | Best for |
|---|---|---|
| margin: 0 auto | Horizontal | Block images with a known width |
| text-align: center | Horizontal | Inline images inside a text block |
| Flexbox | Both | General-purpose centering |
| Grid place-items | Both | Shortest dead-center code |
Always include width and height attributes (or CSS sizes) on your images. This reserves space and prevents layout shift while the image loads.
Key points
- Images are inline by default and do not respond to auto margins until set to display: block.
- text-align: center on the parent centers an inline image horizontally.
- Flexbox (justify-content + align-items) centers on both axes and is the most versatile.
- Grid place-items: center is the shortest dead-center recipe for a single child.
- Give the container a height so vertical centering has space to act.