3 CSS Tricks to Align Content Vertically

Did you try items to align vertical? Is it difficult? Probably it is a problem that has frustrated web developers & some designers everywhere. But don’t worry, in this article, we are going to learn few tricks that can help you in vertical alignment.

Let’s talk about vertical alignment in CSS. There are not any official way in CSS to center content vertically within its container.

1. Flexbox

Latest method to vertical alignment is by using Flexbox. Flexbox is a new module in CSS3. Flexbox offers the most simple method for align content. To align center the content vertically in flexbox, simply align-items:center; add as follows, and that’s all.

See the Pen Align Content Vertically with Flexbox by Web Mantras (@webmantras) on CodePen.light

Make sure that some old browsers not supporting Flexbox. It is fully supported by Internet Explorer 11, Safari 7, and Chrome 33 and newer.

2. CSS3 Transform

CSS3 Transform element has made easy to align content at vertically center. In HTML, you need one parent & one child element.

See the Pen Align Content Vertically with CSS3 Transform by Web Mantras (@webmantras) on CodePen.light

Please note that CSS3 Transform will work in Internet Explorer 10 & Google Chrome 30 or newer browsers.

3. CSS Table-cell

CSS Table is done by setting the parent element display to table, while the child element is to be displayed as table-cell & then use the vertical-align property to align table-cell content vertically.

See the Pen Align Content Vertically with CSS3 Table-cell by Web Mantras (@webmantras) on CodePen.light

Leave a Reply

Your email address will not be published. Required fields are marked *