Responsive Design: Centralize the full-screen square in any screen size

Question

The problem is simple:

• The main part of my page is a square, which should be displayed in the center of the screen in all screen sizes and orientations.
• The square should use the screen efficiently and be as large as possible, without having to scroll
• No scrolling, no fixed size, no overflow, no Javascript.
• Flexbox

This is how the page looks in landscape or portrait browser:

Here is CodePen as a starting point.

<div class="body"> <div class="square"> Square </div> </div> 

Answer 1

Here is my attempt to achieve the ultimate goal.

The key point is to use vmin percentage of the viewport for the width and height properties of the square field:

Example here

 .body, .square { display: flex; align-items: center; justify-content: center; } .body { min-height: 100vh; } .square { width: 100vmin; height: 100vmin; } 

(vendor prefix omitted for brevity, check out Compiled Browsing in the demo).