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
How to create and use CSS Image Sprites ?
In this article, we are going to learn how we can how to create and use CSS Image Sprites.CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous s
3 min read
How to Center a Table with CSS ?
Here are different ways to center table in CSS.1. Center a Table using margin auto propertyThe CSS margin is used to set the space around the element. The margin auto enables dynamic and equal margins from both sides and center the element. Syntaxtable { margin: auto;}By setting the margin auto the
2 min read
How to Center Text in CSS?
Text Centering ensures that the text appears in the middle of a container or the entire page, which can create a balanced and visually appealing layout. CSS can provide multiple ways to achieve text centering, depending on the context, such as horizontally or vertically centering within the containe
4 min read
How to Set Background Image in CSS?
CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied
3 min read