> ## Content Index > Fetch the complete content index at: https://frontendmentorsolutions.io/llms.txt > Use this file to discover other available public pages before exploring further. # Center an element with flexbox - URL: https://frontendmentorsolutions.io/center-an-element-with-flexbox/ - Published: 2026-09-11T14:46:20.000Z - Updated: 2026-09-11T17:04:59.000Z - Description: QR Code Component - Author: FrontendmentorSolutions - Tags: flexbox, #qr-code-component, #solutions, #css ## 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`: ```html

*** The Project Code here ***

``` Example markup Centering with flexbox is applied to the element's parent, not the element itself: ```css 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`.