Vertical Center in CSS Without Transform

This one is quick.

Usually you can do:

[pastacode lang=”css” manual=”top%3A%2050%25%3B%0Atransform%3A%20translateY(-50%25)%3B” message=”” highlight=”” provider=”manual”/]

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

Here’s a little snippet:

[pastacode lang=”css” manual=”top%3A%20calc((836px%20-%20(56.25vw))%2F2)%3B” message=”” highlight=”” provider=”manual”/]

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

[pastacode lang=”css” manual=”margin-top%3A%20calc((100vh%20-%20(56.25vw))%2F2)%3B” message=”” highlight=”” provider=”manual”/]

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.