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:
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.
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.
Guy RoutledgeFront-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.
