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.
Watch Video of this Content on Video Steaming