The transform property on line 13 is used to compensate the extra space created by both top and left.This alone won’t center the content vertically. vertical-align p) uses a top: 50% to display the paragraph at 50% of the parent element’s top. Also, note the use of position: relative, which is used to prevent display problems of the child element, which has a position: absolute defined. This can be changed to fit your site’s needs. vertical-align class defines a fixed 200px height. Let’s have a look at the properties used to make it work (You can check out the demo if you want to see this technique in action): Here’s the related CSS code, that will make our paragraph vertically (and horizontally) centered: To make it work, we need two containers in our HTML: The following examples use a div as a parent, and a paragraph containing the text I want to vertically align: This is an interesting technique, as it allows you to easily center vertically any HTML element: Paragraphs, images, etc. CSS Vertical Align Using The Transform Property Unfortunately, CSS Flexbox isn’t supported by IE9 and earlier versions. This technique is very reliable and works well in a responsive web design context.
Here is the CSS code for vertically centering the text: For the HTML part, we only need a simple container, so let’s consider the following:
Introduced with the CSS3 specification, the display: flex property/value makes it easier to design flexible responsive layout structures without using floats or positioning.Īlong with display:flex, you can easily align anything from table cells to inline elements with the align-items, align-self, and justify-content properties.Ĭlick here to view the demo for this technique. This article demonstrates various CSS vertical alignment techniques: Using a Flexbox, using positioning + transform, using vertical padding, and using line-height. Nowadays, vertically centering text or any element using CSS is a simple task. Unlike horizontal alignments, which can be achieved easily using the text-align property, vertical alignments are often much more tricky to put into action. As long as CSS has been around, centering elements vertically has always been a frustrating task for many front-end web developers.