Question

I always use JQuery to center a div horizontally, but this time I’m doing a project without any JQuery or Javascript support.

so I want to center the div using css only and without the tag for sure.

P.S : the div has z-index and absolute position.

Thanks in advance,

Answer 1

If you’re using absolute positioning, use the properties “left: 50%;” and “margin-left” with a negative value equal to half the width of your div . so, for example:

#div {
width: (desired width);
left: 50%;
margin-left: -(half of the width of the div);
position: absolute;

}

The Z-index doesn’t really matter to centering. If you have other elements laid on top of the div with greater Z-index values, then the div would simply be hidden underneath them.