You have to give it a width. Block level elements fill the entire width if you don't.

Edit: Whoops! drdr beat me to it.

Have you set an explicit width on the .logo element? If not, any block-level non-floated element is treated as 100% with default alignment (generally left, unless your system uses an rtl language). So either set it to {text-align: center;} or give it a width in pixels. Centering seems easiest, since there's nothing else happening in the div. But if it's always the same graphic, an explicit width should work too.

I forgot to mention I have this set up for all images:

img {
max-width:100%;
height: auto;
border:0; }

It is my understanding that you have to leave width out of image tags or they won't reduce in size on mobile devices.

Does this mean I have to leave "display: block" out of any element that contains an image?

If the screen is so small that the image won't fit at its natural size, centering will no longer be a problem :) Keep the width declaration in your default CSS; change it only in your responsive code-- the @media rule or whatever you're using. The forms {width} and {max-width} tend not to like each other. That's probably where the advice about reducing comes from. So whenever you've set one explicitly, set the other one to {auto}.

Every time I wrestle with something that's supposed to resize gracefully, I console myself with the knowledge that at least I don't have to worry about MSIE.

Does this mean I have to leave "display: block" out of any element that contains an image?

You hardly ever need {display: block;} at all. The main exceptions are when you're overriding a default, such as
table.links {display: block;}
or changing something you said elsewhere, like canceling an earlier
{display: none;}
A <div> is block unless you've explicitly told it to be something else. Floats and display have nothing to do with each other, at least not in CSS.

Thanks for explaining Lucy24

this worked:

.logo {width:98%; text-align:center; float:none; margin:0 auto; }