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.