There are a few different techniques to vertically centre objects with CSS, in this post i’ll show you four ways to do it.
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
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.
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 is a layout mode providing for the arrangement of elements on a page.