CSS Newbie - I can't get a DIV to center it's contents

I have a DIV with a unique ID. It is positioned inside other DIV's
<div id="primary" >
<div id="content" >
<div id="my-div" >
.......... content ...........
</div></div></div>
No matter what I specify I can't get the content of 'my-div' to center. I have tried:
margin: 0 auto;
and
text-align: center;
and they are both ignored.
What am I doing wrong?

 

Adding display: table; may do the trick:

#my-div {
display: table;
margin: 0 auto;
}

Code (markup):

https://jsfiddle.net/mx8z3o96/2/

Or if your content div is set to let's say 100% you can set your my-div to 50%:

#my-div {
width: 50%;
margin: 0 auto;
}

Code (markup):

You never mentioned what your other divs are set to. That can determine what would be the best way to center your inner div.

 

Here is the page:

http://www.modernimageusa.com/invoice-payment/

and it's the DIV that contains the textboxes that I want to center. At this time I did some crude padding but that's not the right solution.

Thanks

 

If I am not mistaken this is what floats your text fields to the right in your css:

div#payment-fields{float:right;padding-right:150px}

Try changing it to:

div#payment-fields{display: table; margin: 0 auto;}

https://jsfiddle.net/a97qe6t8/1/

 

That did it! THANKS! And I forgot all about jsfiddle. I am going to ask another "Newbie" question but I will post it on the forum. Hopefully you can give me some input on that question also.

 

Just remember that display: table; won't work on older browsers (might not be an issue at all, but worth remembering).

 

I agree with @PoPSiCLe . display: table; is a sure fix, but won't work in lower than IE8 browsers. I believe it will work in IE8+.