Centering of a div, but the normal CSS does not work

Question

Hello,

I want to center a div, but the general way is

#selector{position:relative;margin:0px auto;}

What exactly is wrong below

#crp{top:40%; position:absolute; margin:auto;}

The Div below is not nested but a standalone. The #crp is going to the extreme right.

<div id="crp">...something goes here....</div>

Thanks Jean

Answer 1

It is because its position is absolute, it does not work according to margins anymore, it is expecting you to fix its position.

Just like you are setting its vertical position with the top property, you have to set its horizontal position as well.

Answer 2

To center a div using margin:0 auto; you must specify width of the element.

You could also use text-align:center; on the parent container.

Also remove any absolute positioning because it breaks standard element flow.