This can be a problem for some developers that how to align center absolute positioned div because sometime we need this margin auto do not work for absolute positioned div that’s why we have a tricky way to do this which will work in all browsers as well.
Remember the container if not body then the div which contain absolute div should have position relative so our absolute div can align center according to relative div.
Solution to align center absolute positioned div:
Let’s suppose we have a red div width 400px height 400px which is aligned center to body and have relative position but we want a div inside this div width 200px height 200px color yellow position absolute to align center of red div. See following
The above code will display.
Now we will create an absolute div inside this relative div, and we will leave left for absolute div 50% then we will see our absolute div width divide that on 2 we will get 200/2=100 we will margin-left:-100; our absolute div that will solve our problem see below.
<div style="width: 400px; height: 400px; margin: auto; background-color: red;">
<div style="width:200px; height:200px; background-color:yellow; position:absolute; left:50px;"></div>
above code will display
No finally use the following code and this will solve your problem
<div style="width:400px; height:400px; position:relative; margin:auto; background-color:red;">
<div style="width:200px; height:200px; background-color:yellow; position:absolute; left:50px; margin-left:-100px;"></div>
Simply we have to do leave left of absolute div 50%; then measure the width of that div divide that on 2 margin left minus that half width that’s all let me know if you have any questions .
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?