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>
#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.