Skip to content
Related Articles

Related Articles

How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
  • Difficulty Level : Basic
  • Last Updated : 15 Feb, 2019

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=
    </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: 
            no-repeat center center;
        }
    </style>
</head>
  
<body
    <div id = "Outer"></div>
</body
  
</html>                    

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :