Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Basic
  • Last Updated : 02 Nov, 2021

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!