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>
