@devsotter
Posted
Hi, to center a div, follow these steps: Within the semantic tag 'main', create a parent div called '.background' or any other desired name. Then, set the background of this div as the container for your box, with the dimensions of the screen. Use 'height: 100vh' to obtain the total height of the viewport and allow space for the content to be vertically centered. Use 'width: 100%' to obtain the total width of the screen.
<main> <div class="background"> <div class="box"> </div> </div>After that, apply the flexbox properties in the class .background to center the content: 'display: flex; justify-content: center; align-items: center;'.
Finally, remove the 'height: 100%' property from the '.box' class to prevent it from inheriting the total viewport size. With these changes, your content will be perfectly centered. There is also the option to center content using grids, so I recommend doing some further research on that topic.
Marked as helpful
