I am trying to get the div to be vertically centered too, not just horizontally.
Flexbox is a much better modern layout tool for solving problems like this:
html {
height: 100%; /* force root element to be 100% of viewport height */
}
body {
width: 100%;
height: inherit;
/* force body width and height to be 100% of viewport height */
margin: 0;
/* remove default margins from body element */
display: flex;
justify-content: center;
align-items: center;
/* set children of body element (i.e. the div) to be laid out as a flexbox, and centered vertically and horizontally in the available space */
}
div {
border: 1px solid black;
width: 100px;
/* set border and width on the div */
}
Thanks for remembering to add the comments :)… this was something I was stuck on for a while because I rushed through my courses lol… Doing refreshers is definitely more fun cause of finding out things I missed out on…
huh… I think understand more the philosophical contention of reincarnation or what Alan Watts frequently spoke about in terms of God being bored and deciding to be human, or as he put it, humans are Gods that made themselves forget they are and put themselves in the extreme situation of being mortal… lol