Skip to content

Instantly share code, notes, and snippets.

@AlexRogalskiy

AlexRogalskiy/hull-height-square.css

Forked from brandonb927/hull-height-square.css
Created February 22, 2022 00:51
Show Gist options
  • Save AlexRogalskiy/1bc9de42d5acd6e28de632da337d2b00 to your computer and use it in GitHub Desktop.
Save AlexRogalskiy/1bc9de42d5acd6e28de632da337d2b00 to your computer and use it in GitHub Desktop.
Download ZIP
Makes a square as large as possible in the viewport without overflowing and centres it vertically and horizontally - https://twitter.com/mikeriethmuller/status/769922629260181504
Raw
hull-height-square.css
.elem {
width: 100vmin;
height: 100vmin;
margin-top: calc((100vh - 100vmin)/2);
margin-left: calc((100vw - 100vmin)/2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment