In order to centre something on the page, it has to take up less than the full width of the page. Your
main-div
currently has no constraint on its width, and therefore takes up the full width of the page.
Once you've added a width constraint, you can use
margin:0 auto;
to horizontally centre the div on the page:
.main-div {
max-width: 50%;
margin: 0 auto;
}
Demo[
^]
If you want it vertically centred as well, then you'll need to make it take up the full height of the viewport and use
flex-direction:column
:
.main-div {
max-width: 50%;
min-height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
html, body {
margin: 0;
padding: 0;
}
Demo[
^]