How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
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.
.png)
