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 add align-items:center; as follows, and that’s all.

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.

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.

Leave a Reply

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