Centering things without the deprecated <center> tag

A horizontally centered chair in the middle of the road.

I know what you’re thinking: “Hey Leland, the late 90s called, they want their blog post idea back.”

Hardy har, but there’s reason why I’m bringing this up now. As I discovered on my rounds in the WordPress.org support forums, people still use the <center> tag.

This explainer post will briefly cover why the <center> tag is deprecated, along with two basic (and semantic) CSS techniques you can use to center things horizontally.

First of all, what does “deprecated” mean?

I’ll borrow this from Wikipedia’s “Deprecation” page:

While a deprecated software feature remains in the software, its use may raise warning messages recommending alternative practices; deprecated status may also indicate the feature will be removed in the future. Features are deprecated rather than immediately removed, to provide backward compatibility and give programmers time to bring affected code into compliance with the new standard.

In English, it might still work, but it’s liable to stop working at any time, so you should probably use something else. Like right now.

Why you shouldn’t use <center>

I get the appeal. It’s simple. It’s easy to remember. Depending on a particular browser’s implementation, <center> seemed to have a one-size-fits-all approach.

You want to center something? Wrap it in <center> tags. And voila. You got something centered.

But there’s a reason why the <center> tag was removed from the web standards over 15 years ago.

HTML is intended to structure the content. CSS is intended to define the presentation of said content. When you consider that, the <center> tag is an abomination.

You don’t hear anyone say, “wow, that’s a killer chunk of horizontally centered content” but you might hear someone say “wow, nice paragraph of content you got there.”

Notice the problem now?

How to horizontally center things without <center>

It is, unfortunately, a bit more complicated than wrapping stuff in a single HTML tag.

Block-level or inline?

First, you have to determine whether you’re dealing with a block-level element or a inline element. Browser defaults dictate the initial state of many HTML tags. Although those defaults can be overridden with CSS, don’t worry about that for now.

A <div> is known as a “blank” block-level element, and a <span> is known as a “blank” inline element. Other HTML tags of note are the <p> tag, which is a block-level element, and the <img> tag, which is inline.

For a comprehensive list of block-level and inline elements, reference the Mozilla Developer Network.

If in doubt, inspect the element in your browser’s development tools.

Centering an inline element, like an image

I remember when I was first getting started with CSS, centering images was the most frustrating thing.

As mentioned before, the <img> is initially an inline element. Because of that, you can’t simply apply a text-align: center; rule and expect it to do anything.

Instead, you can simply use CSS to turn that initially inline img element into a block-level element. Then use auto margins on the left and right to center it.

For example:

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

This same code can apply to any with a defined width, whether it be straight pixels or percentage. Since an image already has predefined dimensions, you don’t need to explicitly define it.

Centering the (inline) contents of a block-level element, like a paragraph

This is where you can simply apply a text-align: center; rule. Any inline element (like an image, if you didn’t override it to be block-level) within will be horizontally centered.

<div>I am centered. And so will any other inline elements</div>

div {
	text-align: center;
}

And that’s about all there is to it.