Vertically-center absolutely-positioned element in viewport?

CSS: i’ve seen many methods, but all methods center the element on the page, rather than the viewport.

How to center an element in the viewport with CSS?


Without wrapper (related to the body). The element should be child of the body (related to the body) - or without any wrapper set to position relative;).


And set position to absolute.


This is not so useful. Most of the times you create wrapper - set the wrapper to 100vh -position: relative; and inside put element position absolute (Or V-center by flexbox).

Add screenshot -or- URL - to get specific answer.