How to Center an Image Horizontally Within a Div Element using CSS ?
Last Updated :
06 Mar, 2024
We will see how to center an image horizontally within an HTML div element using CSS and we will understand the implementation through the example. There can be different approaches in CSS. In general, centering an image horizontally means making it occupy the center of its parent element along the x-axis.
Let us first create a basic structure using HTML and CSS and the syntax and implementation of all approaches to center an image horizontally within a div element. This HTML code defines a webpage with an image placed inside a container `div`. The CSS ensures the image remains responsive by setting its maximum width to 100% and adjusting its height accordingly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center Div</title>
<style>
.container img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Image" />
</div>
</body>
</html>
|
Examples to Center an Image Horizontally Within a Div Element
1. Using Flexbox Property:
Example: This example uses Flexbox to set the image to center in a div. We can also use this method for aligning the item to the center. Flexbox properties control the position, size, and spacing of elements relative to their parent’s elements and each other.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center Div</title>
<style>
.container {
display: flex;
justify-content:center;
}
.container img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Image" />
</div>
</body>
</html>
|
Output:
Center an Image Horizontally Using Flexbox
2. Using margin auto Property:
Example: The example uses the margin property to set the image to center in a div. We can also use this method for aligning the item to the center. This property is used to create space around the element. The approach allows the browser to calculate available space and position the div horizontally in the center. Keep the div width less than the viewport width:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center Div</title>
<style>
.container {
text-align: center;
}
.container img {
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Image" />
</div>
</body>
</html>
|
Output:
Center an Image Horizontally Using Margin property
3. Using Position and Transform Properties:
Example: This example uses the position and transform properties to set the image to center in a div. This method is for aligning the item to the center. The position property specifies the position of the origin of rotation. The transform property specifies a 2D or 3D transformation to an element allowing the user to rotate, move, scale, skew, etc.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center Div</title>
<style>
.container img {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Image">
</div>
</body>
</html>
|
Output:
Center an Image Horizontally using Position and Transform Properties
Share your thoughts in the comments
Please Login to comment...