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= </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:
