How to Center an Image Vertically and Horizontally ?
Last Updated :
04 Mar, 2024
To center an image along X-axis i.e. Horizontally and along Y-axis i.e. vertically we can use different CSS properties.
There are different ways to center an Image Vertically and Horizontally including CSS flexbox properties, absolute positioning, and CSS Grid System.
Approach 1: Using Flexbox
To center an image along the X-axis and Y-axis, use “flex” and wrap up the image into a div container and define some height if you are using it alone to center an image. After that define “justify-content” to “center” along X-axis (Horizontally) and “align-items” to “center” along the Y-axis ( Vertically).
Syntax for Flexbox Positioning:
display: flex;
justify-content: center;
align-items: center;
Example: Illustration of making an Image Center Vertically and Horizontally Using Flexbox Properties
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Center Image horizontally and vertically</title>
<style>
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Your Image" />
</div>
</body>
</html>
|
Output:
Output
Approach 2: Using Absolute Positioning
Use absolute positioning of an image to make it center from X-axis and Y-axis. To, position an element “absolute” firstly, position its parent element as “relative“. then, define the position of the image element from the top, left, right, and bottom.
Syntax for absolute positioning:
position: relative;
position: absolute;
Example: Illustration of making an Image Center Vertically and Horizontally using positioning absolute.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Center Image horizontally and vertically</title>
<style>
.container {
height: 100vh;
width: 100%;
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Your Image" />
</div>
</body>
</html>
|
Output:
Output
Approach 3: Using Grid
To center an image along the X-axis and Y-axis, use a “grid” and wrap up the image into a div container and define some height if you are using it alone to center an image. After that define “justify-content” to “center” along X-axis i.e. Horizontally and “align-items” to “center” along Y-axis (Vertically).
Syntax for Grid Positioning:
display: grid;
justify-content: center;
align-items: center;
Example: Illustration of making an Image Center Vertically and Horizontally Using Grid
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Center Image horizontally and vertically</title>
<style>
body {
background-color: rgb(236, 220, 251);
}
.container {
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Your Image" />
</div>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...