How to Vertically Center Text and Icons in CSS
In this article, we’ll outline various methods for horizontal and vertical centering — something that always used to be quite tricky but is now a breeze to accomplish.
How to Use Flexbox for Horizontal and Vertical Centering
A Flexbox can align elements in horizontal and vertical space to center text, icons or any other elements in CSS.
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.
See the Pen
Horizontal and Vertical Centering with Flexbox by SitePoint (@SitePoint)
on CodePen.
Read on to learn about vertical positioning for the box model and positioning techniques.
How to Use position and transform for Flexible Vertical Centering
When you cannot use a Flexbox, or need to center one item within a container, you can use position to place the element at the center of its container.
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.
See the Pen
Untitled by SitePoint (@SitePoint)
on CodePen.
How to Use line-height for Vertical Centering with a Fixed Height
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;
}How to Use vertical-align for Centering Inline Elements
The vertical-align property only affects elements with their display set to inline, inline-block or table-cell.
It takes a length, percentage or keyword value.
Lengths and percentages align the baseline of the element at that given distance above the baseline of its parent.
Keyword values can be one of the following:
baselinesubsupertext-toptext-bottommiddletopbottom
Most of these are quite intuitive but sub aligns the baseline to the parent’s sub-script baseline and super aligns the baseline of the element to the parent’s super-script baseline.
Let’s take a look at vertical-align in a practical example.
I’ve got a grid of images and text here and all of them have different heights which means the text doesn’t all align neatly.
<div class="grid">
<img src="http://placebacn.com/200/400">
<h2>grilled bacon</h2>
</div>
<div class="grid">
<img src="http://placebacn.com/200/300">
<h2>tasty bacon</h2>
</div>
<div class="grid">
<img src="http://placebacn.com/200/200">
<h2>crispy bacon</h2>
</div>
<div class="grid">
<img src="http://placebacn.com/200/350">
<h2>bacon</h2>
</div>We can set the grid containers to display:inline-block and use vertical-align: bottom on the images to make everything line up nicely.
If there was no text here and we wanted all the images to be vertically centered, we could use vertical-align: middle and achieve quite a nice effect.
