css

Centering HTML elements using CSS can be a surprisingly difficult task. Getting the horizontal alignment right is relatively straightforward, but getting the vertical alignment down can prove to be challenging. And getting an element to sit smack dab in the middle of its container? Forget about it! 🙂 I’m kidding, but how to center elements using CSS is a question I see asked pretty regularly; one for which I don’t always see good or reliable answers. So in order to provide some guidance, in this article we’ll look at 3 ways to center HTML elements using CSS. I’ll start with the most backwards compatible of the 3, then move towards what I see as the most elegant solution. Pick the one that works for you… Let’s have a look!

First, let’s see all 3 methods in one page:

See the Pen ObNRjV by Chase Allen (@ccallen001) on CodePen.

Individually,

1. Padding

The first method relies on the padding property of the containing element, and CAVEAT you have to do some calculating/experimenting with this one in order to get it right. The padding property is applied to the parent element equally all the way around on each side. Doing so forces the contained element in to the center. A good way to think about the calculations is by starting with the width and height you want for your container element (let’s say 200px for example’s sake). Next, determine the width and height you want for the centered element (let’s say 50px). You calculate the padding needed by subtracting the inner element’s dimensions from the outer’s and dividing by 2. In formulaic fashion:

padding = (outer - inner) / 2

or

p = (o - i) / 2

Using the example values from above the formula yields

75 = (200 - 50) / 2

or

75px

You set the containing element’s width and height to match the centered element’s width and height and apply apply the calculated padding. So to get a container with width and height of 200px, with a contained center element of width and height 50px… simply give the containing element a width and height equal to 50px and a padding value equal to 75px. As mentioned, this method is probably the least elegant of the three (as you have to do some calculating), but it’s probably the best supported across browsers and on older browsers as well. Here’s what the code and results look like:

See the Pen BQKRmm by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

2. Transform

This method relies on CSS3’s transform property. It additionally relies on the position property. This method, like method 1, is not one of great elegance; however, you won’t have to do any extra calculating or hard coding of values to get it to work. The idea with this one is to give the parent element a position of relative (setting up its child element for absolute positioning) and then using positioning on the child element to set it 50% from the top and 50% from left of the borders of the parent. Because the centered element itself has dimensions, we’ll have to pull it back a ways in order to get it to sit perfectly in the middle. We’ll use the transform: translate property to pull the element back 50% of it’s own width and height. So all together, we simply push the contained element 50% of the way from the containing element’s top and left edges… then we pull the element back by 50% of its own width and height. Doing so effectively puts the contained element dead center within the parent. Note: The transform: translate property is applied to both the X and Y axes of the child element; and a value of -50% is applied. Here’s what it looks like:

See the Pen xRVdjb by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

3. Flex

This last method is dirt simple and highly effective, so it’s by far the most elegant approach of the 3 discussed. This method uses flexbox. Flexbox is a relatively new concept in the world of CSS and thus has the least cross browser/older browser support. Here’s some information on flexbox browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Browser_compatibility

As usual, IE is the one you have to look out for!

Using flex to center an element in its container really is as simple as giving the parent element a display value of flex, and then using the align-items and justify-content properties to center the child element(s). And the values of those two properties couldn’t be simpler either, you literally just type center for each. align-items does the vertical centering and justify-content handles the horizontal axis. The code and results look like this:

See the Pen LbNyBN by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

So there you have it! 3 ways to center elements using CSS. The padding method is likely the oldest and most supported approach, but you’ll need to do some calculations to get it to look just right. Using the transform property relies on CSS3 compatibility but it doesn’t require any special calculations. Using flexbox, or flex, makes the job a cinch; unfortunately, flex isn’t supported in older browsers.

Hopefully you found this article helpful. Thanks for reading!

Comments