Centering a div but normal CSS doesn't work

Question

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 standalone. #crp is in rightmost order.

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

Thanks Jean

+2

X10nD Apr 28 10 at 8:23

2 answers

To center the div with margin:0 auto;

, you must specify the width

element.

You can also use text-align:center;

in parent container.

Also remove any absolute positioning because it interrupts the flow of standard elements.

+2

rochal Apr 28 10 at 8:25 am

Francisco soto · Accepted Answer · 2010-04-28T08:25:55+0000

This is because its position is absolute, it no longer works according to the margins, it expects you to fix its position.

Just like you set the vertical position with the top property, you must also set its horizontal position.