Center an element with flexbox

The Problem

The QR code element needs to be centered on the page, both vertically and horizontally. Here, we'll do it with flexbox.

The Solution

Let's say our markup structure is like this, and we want to center the main element inside the body:

<body>
  <main>*** The Project Code here ***</main>
</body>

Example markup

Centering with flexbox is applied to the element's parent, not the element itself:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-block-size: 100vh;
}

The solution's code

In this example, the parent is the body, but in your own solution it might be a different element. With these rules, the main element is centered within the body.