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

Given an image and the task is to set the image to align to 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 position property to make the image align to center.

<!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= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfgbg.png"/> 
    </div> 
</body>  
  
</html>                     

Output:

Example 2: This example uses center property to set the image to center in a div.

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        Horizontal and Vertical alignment 
    </title>         
  
    <style> 
        #Outer { 
            border: 2px solid black; 
            height: 300px; 
            background:  
url(https://media.geeksforgeeks.org/wp-content/uploads/gfgbg.png) 
            no-repeat center center; 
        } 
    </style> 
</head> 
  
<body>  
    <div id = "Outer"></div> 
</body>  
  
</html>                     

Output:

My Personal Notes

Recommended Posts: