Vertical Center in CSS Without Transform

This one is quick.

Usually you can do:

top: 50%;
transform: translateY(-50%);

But sometimes you need to vertically center something without the use of transforms.

Here’s a little snippet:

top: calc((836px - (56.25vw))/2);

If you don’t know the height of the parent (as is most cases) this might work:

margin-top: calc((100vh - (56.25vw))/2);

And here’s a little demo. The “marker” div is using transforms. The “centered” div isn’t:


See the Pen zKwEoZ by Mike Newell (@newshorts) on CodePen.

Leave a Reply

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