Open In App
Related Articles

How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?

Improve Article
Improve
Save Article
Save
Like Article
Like

In this article, we will know how to center-aligned the image in div tag using CSS & will also understand its implementation through the example. Given an image and we need to set the image that aligns to the center (vertically and horizontally) inside a bigger div. It can be done by using the position property of the element.

Example 1: This example uses the position property to make the image align to the center.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Horizontal and Vertical alignment</title>
     
    <!-- Style to set horizontal and
        vertical alignment -->
    <style>
    #Outer {
        border: 2px solid black;
        height: 300px;
        position: relative;
    }
     
    img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    </style>
</head>
 
<body>
    <div id="Outer">
        <img src=
    </div>
</body>
 
</html>


Output:

Example 2: This example uses the center property to set the image to center in a div. We can also use this method for aligning the item to the center.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> Horizontal and Vertical alignment </title>
    <style>
    #Outer {
        border: 2px solid black;
        height: 300px;
        background: url(
          no-repeat center center;
    }
    </style>
</head>
 
<body>
    <div id="Outer"></div>
</body>
 
</html>


Output: From the output, we can see the output is same as the previous output.


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 02 Nov, 2021
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials