AtoZ CSS Quick Tip: How to Vertically Center Text and Icons

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for vertical-align 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, so in this article, we’ve added quick tips on how to vertically center text and icons.

V is for vertically centering text and icons

In the original screencast video for the vertical-align property, we looked at a couple of methods for centering elements vertically. In this article we’ll outline three different methods for vertical centering – something that always used to be quite tricky but is now a breeze to accomplish.

Use line-height for simple vertical centering

To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements. If the height of the container is known, then setting a line-height of the same value will vertically center the child elements.

.container {
  width: 200px;
  height: 200px;
  line-height: 200px;
}

Use position and transform for flexible vertical centering

The line-height method above is quick and dirty but relies on fixed heights. I tend to avoid setting height explicitly as it can often restrict the flow of content in a responsive project. This technique is not flexible enough if you’re working with elements of variable or fluid height.

Instead, we can combine position and translations to vertically center variable height elements. For example, to vertically center an element within the whole height of the viewport, we could use the following snippet:

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

We first create a positioning context by setting position:relative on a container element. This will then allow us to position the .vertical-center element within its boundaries.

Next, we place the top left corner of the element to be centered in the exact center of the container by positioning its top edge 50% away from the top of its parent and 50% away from the left of its parent.

Finally, the element is nudged back into the center by translating it up by 50% of its height and left by 50% of its width. Our element is now vertically and horizontally centered within the container. Because the placement is done with percentage values that are relative to the size of the element, if the width or height of the container or child element changes the element will remain centered.

Use flexbox for vertical centering

The method above works great for centering elements using a traditional box model and positioning techniques. It will work in IE9+ but if you only need to support modern browsers or IE10+, you can achieve the same result with much less code by using flexbox.

Flexbox is a very different way of thinking about layout but one of its strengths is how it can align elements in horizontal and vertical space.

To center an element using flexbox we can use the following snippet:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

This compact snippet turns our .container into a flex container which automatically turns its child elements into flex items. These flex items can then be centered horizontally with justify-content and vertically with align-items.