How to Center an Image in CSS?
Last Updated :
15 Nov, 2024
To center an image in CSS, we will align the image to the container horizontally and vertically as the layout requires.
Center Images Horizontally
1. Using text-align Property
The simplest way to center an image horizontally within a block-level container is to use the text-align property. This method works well when the image is inline or inline-block.
Syntax
.parent {
text-align: center;
}
HTML
<h2>Centering with Text Align</h2>
<div style="text-align: center;">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image" style="max-width: 100%; height: auto;">
</div>
Output
2. Using margin Property
When the image is set as a block element, you can center it by setting the left and right margins to auto.
Syntax
img {
display: block;
margin-left: auto;
margin-right: auto;
}
HTML
<h2>Centering with Margin Auto</h2>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image"
style="display: block; margin-left: auto;
margin-right: auto; max-width: 100%;
height: auto;">
Output
3. Using Flexbox
Flexbox is a layout model that allows for easy centering of images both horizontally and vertically. By setting the display of the container to flex, you can center the image with minimal code.
Syntax
.parent {
display: flex;
justify-content: center;
}
HTML
<h2>Centering with Flexbox</h2>
<div style="display: flex; justify-content: center;
height: 100vh; border: 1px solid #ccc;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image"
style="max-width: 100%; height: auto;">
</div>
Output
4. Using CSS Grid
CSS Grid also allows for straightforward centering. By defining a grid container and using the place-items property, you can center images with ease.
Syntax
.parent {
display: grid;
place-items: center;
}
HTML
<h2>Centering with Grid Layout</h2>
<div style="display: grid; place-items: center;
height: 100vh; border: 1px solid #ccc;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image"
style="max-width: 100%; height: auto;">
</div>
Output
Center Images Vertically
1. Using Line Height
If you want to center an image vertically within a fixed-height container, you can set the line-height of the container equal to its height. This method works well for single-line text and small images.
HTML
<div style="height: 200px; line-height: 200px; text-align: center;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image"
style="vertical-align: middle; width: 100%; height: 100%;">
</div>
Output
2. Using Absolute Positioning
Absolute positioning can allows the precise placement of the element relative to its nearest positioned ancestor. By combing the absolute positioning with transforms, we can center the element with its container.
Syntax
.parent {
position: relative;
height: 100vh;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML
<div style="position: relative;
height: 100vh;
border: 1px solid #ccc;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image"
style="position: absolute; top: 50%;
left: 50%; transform: translate(-50%, -50%);
max-width: 100%; height: auto;">
</div>
Output
Centering Images in a Container
When centering images within a larger container, it's essential to ensure that the container has defined dimensions. Here’s how to center an image within a fixed-size container using Flexbox.
HTML
<div style="display: flex; justify-content: center;
align-items: center; width: 400px;
height: 400px; border: 2px solid #000;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240903105930/gfg.jpeg"
alt="Centered Image"
style="width: 100%; height: 100%;">
</div>
Output
Centering Images in a Containe
Similar Reads
How to Center an Image in HTML? To Center an image in HTML is a common task in web design, and there are several modern ways to do it using CSS. While the old <center> tag was once popular, it's now deprecated in HTML5. Today, nearly 80% of websites use CSS techniques like text-align, margin: auto, or flexbox to center image
3 min read
How to Center an Image using Tailwind CSS ? Here are the methods to center an image using Tailwind CSS:Method 1. Using Flexbox ClassesThis method centers the image both horizontally and vertically using Tailwind's flex, justify-center, and items-center classes.HTML<html> <head> <script src="https://cdn.tailwindcss.com"></
2 min read
How to Align Images in CSS? Aligning images properly is essential for creating visually appealing and well-structured web pages. CSS can provide several methods to achieve this, each suited for the different scenarios. we are going to discuss how can we align images using CSS.Below are the following approaches to align images
6 min read
How to Center a Button in CSS? To Center a button in CSS is a common task in web design, especially when aiming for clean, user-friendly interfaces. Whether it's on a form or in the middle of a page, a centered button draws attention and improves usability. Around 85% of modern websites implement centered buttons in key areas lik
3 min read
How to Centre a List in CSS? Lists are a common element in web design, used for navigation menus, item displays, and more. Centering a list in CSS can enhance the visual structure of a webpage, making it more aesthetically pleasing and user-friendly. There are multiple ways to achieve this, each using different CSS properties a
2 min read
How to Add Background Image in CSS? The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL.HTML<h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/up
1 min read