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. This article covers horizontal and vertical centering with Flexbox and with positioning plus transforms. In another article we also cover how to horizontally and vertically center an element with CSS Grid.
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:
baseline
sub
super
text-top
text-bottom
middle
top
bottom
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.
For more centering methods, don’t forget to check out how to horizontally and vertically center an element with CSS Grid.
FAQs on How to Vertically Center Text and Icons in CSS
What is vertical alignment in CSS?
Vertical alignment in CSS is a property that controls the positioning of elements along the vertical axis. It’s a powerful tool that can help you design layouts with precision and flexibility. It can be used to center elements vertically, align them to the top or bottom of their container, or distribute them evenly across the vertical space. The vertical-align property in CSS is often used with inline or inline-block elements, but it can also be used with table cells.
How do I vertically center text with CSS?
To vertically center text with CSS, you can use the “flex” display property along with “align-items: center”. Here’s a simple example:.container {
display: flex;
align-items: center;
height: 100px;
}
In this example, the text within the .container class will be vertically centered. The height of the container is set to 100px, but it can be any value depending on your design needs.
Can I use vertical alignment with block elements?
Yes, you can use vertical alignment with block elements, but it requires a different approach. The most common method is to use the “transform” property along with “top” and “position” properties. Here’s an example:.block-element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
In this example, the block element is moved down by 50% of the height of its container, and then moved up by 50% of its own height. The result is a vertically centered block element.
Why is my vertical alignment not working?
There could be several reasons why your vertical alignment is not working. One common reason is that the parent container does not have a specified height. The vertical-align property works relative to the height of the parent container, so if the height is not specified, the alignment may not work as expected. Another reason could be that you’re trying to vertically align a block element using the vertical-align property, which only works with inline or inline-block elements.
How do I vertically align an image in CSS?
To vertically align an image in CSS, you can use the same methods as for text. If you’re using the flex method, your CSS might look like this:.container {
display: flex;
align-items: center;
height: 200px;
}
In this example, any image within the .container class will be vertically centered.
Can I use vertical alignment with CSS Grid?
Yes, you can use vertical alignment with CSS Grid. The “align-items” property works with grid containers just like it does with flex containers. Here’s an example:.grid-container {
display: grid;
align-items: center;
}
In this example, all grid items within the .grid-container class will be vertically centered.
How do I vertically align text in a button?
To vertically align text in a button, you can use the “line-height” property. The value of the line-height should be the same as the height of the button. Here’s an example:.button {
height: 50px;
line-height: 50px;
}
In this example, the text within the .button class will be vertically centered.
How do I vertically align multiple elements?
To vertically align multiple elements, you can use the flex or grid methods. If you’re using flex, your CSS might look like this:.container {
display: flex;
align-items: center;
}
In this example, all direct children of the .container class will be vertically centered.
Can I use vertical alignment with absolute positioning?
Yes, you can use vertical alignment with absolute positioning. The “top” and “transform” properties can be used together to vertically center an absolutely positioned element. Here’s an example:.absolutely-positioned-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
In this example, the absolutely positioned element will be vertically centered relative to its nearest positioned ancestor.
How do I vertically align text in a table cell?
To vertically align text in a table cell, you can use the “vertical-align” property with the value “middle”. Here’s an example:.table-cell {
vertical-align: middle;
}
In this example, the text within the .table-cell class will be vertically centered.
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.