AtoZ CSS Quick Tip: How to Vertically Center Text and Icons
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
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
.
Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




