# Vertically-centering elements

A demo by Terry , presented as part of the article, Little Codes . He also writes on Medium .

## Using CSS 2D transform

By positioning the said element 50% from the top and from the left, and then by offsetting it by half of its calculated dimension by CSS transform (translate), we can easily achieve the effect of vertical centering.

The advantage of this method is that it is supported in many browsers: 81.6% global support at the time of writing.

Vertically-centered item using CSS 2D transform .

## Using flexbox

Alternatively, we can use the modern flexbox specification to achieve the same effect.

This method is significantly simpler when it comes to implementation, although it only enjoys 41% complete support and 35% partial support globally.

Vertically-centered item using flexbox .