If you're new to web development or just starting to play around with CSS, what I'm about to say may surprise or disappoint you:
There's no way to float center in CSS. You can float left. You can float right. But you can't float center.
Yes, I'm sure.
Of course, this doesn't mean you can't center with CSS. Today I'll cover two basic centering methods to get you started, and I'll also point you to some resources for learning more advanced centering techniques.
Why Can't CSS Float Center?
I know, it's weird. It seems like something you should be able to do, doesn't it?
Think of it this way, though: imagine you're in a pool, floating on a raft. You paddle yourself to the very center of the pool, perfectly equidistant from the left and right sides, and you float there... for a moment. Unless you're tethered or you start paddling to keep yourself in the center, you're going to drift away from it.
Your HTML element is not relaxing in a pool, but when you tell it to float, you need to tell it which way. Left and right are real directions it can float in. "Center" isn't.
So, How Do I Center With CSS?
That depends on what you're centering, but there are two good go-to options.
Before I get to those, let me tell you one quick important thing: when you're centering an element, it centers within its container. So, for example, if you use a centering technique on a photo in your blog's sidebar, it will be centered within the sidebar. It won't jump out of its sidebar and land in the center of your page unless you do something really wacky. The same goes for anything centered within a blog post — it will be centered from the left and right edges of the post column, not necessarily at the very center of your page.
Centering Text
If you're centering text, text-align: center; will do the trick. Here's an example of the CSS styling of a simple, centered heading:
h1 { text-align: center; }
That will give you a headline centered between the left and right edges of its container.
Centering Other Elements
If you're centering something else, margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them. I'll point you to some more information on advanced centering in the Further Reading at the bottom of this post.
What About Using <center> in HTML?
Short answer: No. Bad. Don't.
Long answer: The <center> tag is deprecated as of HTML 4, and using it creates a few different issues. HTML centered elements can display differently in different browsers, and using the <center> tag can increase page load time. Also, heavy use of <center> will complicate your site redesigns — removing hundreds of <center> tags takes a lot longer than changing one style rule in a stylesheet.
The <center> tag was officially deprecated many, many years ago, but it is still recognized by most browsers through their backward-compatibility features. So yeah, if you <center> something, it'll be centered. However, in the interest of future-proofing your blog — and sparing yourself (or your developer) the agony of sifting through old <center> tags — you should use modern CSS centering methods instead.
Further Reading:
Now that I've taken you through the basics of CSS centering, let me show you a selection of resources to help you step up your CSS centering game!
"Centering in CSS: A Complete Guide", from CSS-Tricks.com. How to center everything. The tutorial has a helpful decision-tree format.
Also from CSS-Tricks.com, "Faking Float Center". A clever CSS trick indeed, you can use this to center an image between two columns of text. Very cool.
Design Shack's "How to Center Anything with CSS"; lots of practical centering advice.
For more information on why the <center> tag was deprecated, and what to use instead of it, I recommend this Sitepoint forum thread. You'll need to skim through a bit of nerdy grouching, but there are thick slabs of good info in there.
Floating frangipani photo by Flickr user Rolfe Kolbe, used under Creative Commons license.
