How to Vertically Align an Image Inside a Div in CSS ?

Last Updated : 22 May, 2023

In this article, we are going to see how we can vertically align an image inside a div. Centering content both vertically and horizontally is one of the most important functions which needs to be done.

Here vertically align refers to the same amount of space above and below the image inside the particular HTML div. There are two approaches that can be used to achieve this layout and both of them are listed and demonstrated below.

Approach 1: This approach involves the usage of one of the display properties of CSS which is flex. The div which will contain the image inside it needs to have its display set to flex and then must have its content justified to center using the justify-content: center property. This will center the image horizontally to the center and now to center vertically, we have to use the align-items: center property.

Syntax:

div {
      display: flex;
      justify-content: center;
}

img {
     ...
}

Example: The code demonstrates how we can use the display property approach to get an image to be vertically centered in the HTML div.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to vertically align an 
        image inside a div?
    </title>
     
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            width: 300px;
            background-color: black;
            margin: 0px 150px;
        }
 
        .img {
            width: 270px;
            height: 150px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green; margin: 2rem;">
        GeeksforGeeks
    </h1>
 
    <h3 style="margin: 2rem; margin-top: -1.5rem;">
        How to vertically align an image inside a div?
    </h3>
 
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211005162802/longdesc2.png"
            alt="GeeksforGeeks Logo" class="img">
    </div>
</body>
 
</html>

Output:

How to vertically align an image inside a div?

Approach 2: This approach includes the usage of the position properties of CSS. The outer div will have the position as relative and the inner image will have the position as absolute so that the image stays inside a relatively positioned container. Then the second step is to add the left and top properties to the image so that the image gets distant from the top-left corner and gets centered both horizontally and vertically. If you don’t want to center the image horizontally, don’t add the left property. Both the left and top will have values of 50%.

Note: If you want to center the image perfectly to the center horizontally you need to add the transform property and add -50% to its X and Y axis. Without that, the image will be partially outside the container.

Syntax:

div {
    position: relative;
}
image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Example: The code demonstrates how we can use the position property approach to get an image to be vertically centered in HTML div.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to vertically align an 
        image inside a div?
    </title>
     
    <style>
        .container {
            position: relative;
            background: darkgrey;
            height: 250px;
            width: 75%;
            margin: 0 10%;
        }
 
        img {
            width: 30%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
 
<body>
    <h1 style="color:green; margin:2rem">
        GeeksforGeeks
    </h1>
     
    <h3 style="margin:2rem; margin-top:-1.5rem">
        How to vertically align an image inside a div?
    </h3>
     
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
            alt="GeeksforGeeks Logo"
            class="img">
    </div>
</body>
 
</html>

Output:

How to vertically align an image inside a div?

Approach 3: Using line-height and vertical-align properties: This approach uses the line-height and vertical-align properties to vertically align an image inside a div.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to vertically align an image inside a div?
    </title>
    <style>
        .container {
            height: 500px;
            line-height: 500px;
            text-align: center;
            background: darkgrey;
        }
 
        img {
            display: inline-block;
            vertical-align: middle;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green; margin:2rem">
        GeeksforGeeks
    </h1>
    <h3 style="margin:2rem; margin-top:-1.5rem">
        How to vertically align an image inside a div?
    </h3>
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
            alt="GeeksforGeeks Logo"
            class="img">
    </div>
</body>
 
</html>

Output:

How to vertically align an image inside a div?

Approach 4: Using Grid property: In this approach, we are using CSS grid property to vertically align the image inside the div.

Example: here we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to vertically align an
        image inside a div?
    </title>
 
    <style>
        body {
            Background-color: lightgreen;
        }
 
        .container {
            display: grid;
            place-items: center;
        }
 
        .img {
            max-width: 60%;
            max-height: 60%;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green; margin: 2rem;">
        GeeksforGeeks
    </h1>
 
    <h3 style="margin: 2rem; margin-top: -1.5rem;">
        How to vertically align an image inside a div?
    </h3>
 
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211005162802/longdesc2.png"
            alt="GeeksforGeeks Logo" class="img">
    </div>
</body>
</html>