I've been facing a challenge in finding an efficient way to center a div. I prefer clean html and avoid unnecessary divs just for centering purposes. To solve this, I opted to use position:absolute.
Although I am aware that position:absolute disrupts the document flow, I'm looking for a solution to "undo" this disruption. Currently, I have a div with 100% width, 20% height, vertically centered. Inside this div, there's a paragraph, and another paragraph outside of this div at the bottom of the page - but due to using position:absolute, the copyright notice displays before the div.
Is there a method to restore the document flow without having to apply margin-top: npx; to every post-div element on the page?
HTML:
<div id="container">
<p>Hello</p>
</div>
<p>Copyright Notice here</p>
CSS:
*
{
outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}
#container
{
width: 100%;
height: 20%;
position: absolute;
left: 0%;
right: 0%;
top: 40%;
bottom: 40%;
background-color: khaki;
}
p
{
text-align: center;
}