There are some things you need to do first and I'll try to explain before giving the code.

First... wrap the image around a BLOCK
This eliminates the need for < DIV > or < P > tags (which would make everything centered.

Next... you want to tell your browser NOT to center but to make both sides equal. I know it's saying the same thing but the code is more readily undsterandable if you understand how it 'thinks'.

So you are saying: "Take this BLOCK (and everything in it) and make both sides EQUAL"

.logo-img img { display: block; margin-left: auto; margin-right: auto }

. -- do this only once
display:block -- wrap in block
margin-left: auto
margin-right: auto
-- make left and right sides the same

There you go... the 'correct' way to center an image in CSS.