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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: