How to Center a DIV with Flexbox

H
Published in: CSS

Centering a div element on a web page is easy with Flexbox. The element is centered both vertically and horizontally and the method uses no JavaScript.

Flexbox is supported in all modern browsers (including mobile) but if your site visitors are still using one of the older versions of Internet Explorer, the CSS approach may be better.


<style>
  html, body {
    height: 100%;
  }

  div.flexbox {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div class="flexbox">
  <p>I am the center</p>
</div>
Published in: CSS

Looking for something? Find here!

Meet the Author

Web Geek, Tech Columnist
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in GSuite and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. Read more on Lifehacker and YourStory

Get in touch