How To Center An Element With Style Position As Absolute
Here we consider how to center an element with style position as absolute.
Lets start with one example here.
Suppose we have an image inside a div as shown below.
The Style applied for this div and image are as follows.
.clsDiv {
background-color: yellow;
margin-top: 50px;
height: 300px;
}
On runtime it would look something like this.
Now To center this image, we can apply following style.
.clsImg {
width: 400px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
That's only by applying above style for the image, we can center the image.
The result is as follows.
