HTML & CSS
Article

AtoZ CSS Quick Tip: Centering Elements with Float and Clear

By Guy Routledge

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for Float and Clear here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the Float and Clear property for you.

F2b-01

F is for Float and Clear

Floating is great if you want to move an element to the left or right of a page, but unfortunately, you can’t do float: center to center an element. What a pain right?

Well, never fear, here’s the low down on centering all sorts of elements.

Tip 1

If the element is a block element, you can combine width and margin: auto.

margin: auto will automatically calculate the margins on the left and right sides, so they’re both equal, centering the block within its containing element.

See the Pen tip-margin-auto by SitePoint (@SitePoint) on CodePen.

Tip 2

If the element is inline (or inline-block), use text-align: center on the parent container.

See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.

Tip 3

If the element is absolutely positioned, combine left and transform to center the element horizontally.

See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.

A similar technique can also be used to vertically center elements, but more on that in a future tip!

Tip 4

Use flexbox (another ‘F’ property, yay!)

To use flexbox to center a single item (or group of items) you need to set two properties on the containing element: display: flex and justify-content: center.

See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.

There are plenty of other cool things you can do with flexbox including growing or shrinking a containing element to best use the available space. You can even align an element both vertically and horizontally as opposed to blocking and inline which dictate either vertical or horizontal alignment.

Another great benefit of using flexbox is that there is no longer an issue with collapsing containers and the need to use a clearfix solution.

More:
  • Paul O’B

    Here’s another :): Tip 5 (my favourite): display:table and margin:auto (no width needed).

    • Angela Molina

      Great tip! Thanks Paul O’B :)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.