vsupalov

Flexbox vertical and horizontal centering

October 11, 2013

Assuming you want to center a single element on a page vertically and horizontally, in Chromium it can be achieved the following way:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <h1>I am centered!</h1>
  </body>
</html>

Specifying the height attribute for html as well as body is key.

Join the Mailing List

Subscribe to get weekly updates and my latest articles by email.

    (About the content, privacy, analytics and revocation).

    We won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit