4 CSS Tricks for Vertical Alignment

There are a few different techniques to vertically centre objects with CSS, in this post i’ll show you four ways to do it.

display: table-cell

The first trick is by using display: table for the parent of the element you want to center, then your element will behave like a table cell by using display: table-cell.

line-height

This technique only works if you have a single line text, by setting the line-height will make in the middle of the parent div.

CSS3 transform

With this technique we use the CSS property transform which is usally used for rotating and scaling elements, but it ca be also used to translate them vertically.

Flex Box

Flex Box is a layout mode providing for the arrangement of elements on a page.