Categories
Programming Web

CSS equivalent of the center tag

Update Jan 2020: Thankfully the landscape has changed a lot since this post, and flexbox is now almost certainly the answer.

Because I understand the temptation to sometimes just wrap a div in a damn <center> tag instead of messing around with auto margins, translatex(-50%), or any other such nonsense — and also partly as a future reference for myself — here is what I’ve found to be the CSS equivalent of the <center> tag.

.center-dammit {
    display: block;
    margin: 0 auto;
    text-align: center;
}

Caveat: I’ve not checked in depth so I’m sure there will be about a dozen exceptions. W3C, please sort this out for CSS4!