Let’s talk about vertical alignment in CSS, or to be more precise how it is not doable. CSS has not yet provided an official way to center content vertically within its container. It’s a problem that probably has frustrated web developers everywhere. But not to fear, in this post, we’re going to run by you a few tricks that can help you imitate the effect.
These tricks may however have limitations, and you may have to use more than one trick to complete the illusion. If you know of any other trick, let us know in the comments.
Recommended Reading: How To Obtain Equal Column Height With CSS
1. Use Absolute Positioning
The first trick we are going to see here uses the position property. You have two <div>, one is the container, the other, the child element which contains the content.
We will first set the position of the container element to relative, then we set the child element position to absolute. This allows us to freely place it across the container.
To align it vertically, move the child element position from the top, by half of the container’s height, and pull it up by half of the child element width. Here is the output:
This trick is perfect when there is only a single child element, otherwise the absolute position will affect the other element within the same container.
2. Use CSS3 Transform
CSS3 Transform has made it easy to put content at the center. CSS3 Transform, unlike the position property, will not affect the position of other elements within the same container.
Assuming we have the same HTML structure as the preceding method — one parent, one child element — 50% from top and using CSS transform gives a translation of -50%. And there you have it.
Keep in mind though that CSS3 Transforms will not work in Internet Explorer 8 and below. You might want to use any of the other methods here as a fallback.
3. Use Padding
We can also use padding to create an illusion of vertical alignment. To do so, simply set the top and the bottom padding equally, as follows:
This trick is suitable for when you do not set the container in a fixed width, just set the width to auto.
4. Use Line Height
If you only have a single line of textual content within a container, you can align the text vertically using the line-height property. Set the line-height value for about the same as the container height, and you will see the following output.
Remember that this trick only works with a single line of text. If the content breaks into two or more lines, the space between each line would be as we specified in the line-height, giving us too much whitespace.
5. Use CSS Table
Personally, using CSS Table is my favorite trick for applying vertical alignment. It works in old browsers like Internet Explorer 7. This method is done by setting the container element display to table, while the child element is to be displayed as table-cell then use the vertical-align property to center text vertically.
6. Use Flexbox
The last method to vertical centering is by using Flexbox. Flexbox is a new module in CSS3. It offers a more straightforward method for aligning content. To center the content vertically in flex box, simply add align-items: center; as follows, and that’s it.
Keep in mind that Flexbox some browsers only support partials feature of the Flexbox module such as Internet Explorer 10, Safari, 6, and Chrome 27 and below. Hence, similar to the trick with CSS3 Transform, make sure that the effect falls nicely in these browser.
EPL Trending
