I have a container which has height of 100vh
in order to stretch for the entire screen. Inside that I have a h1
and a div
, i.e. two containers. Now, the content inside the div
is what I want to center align on the page, but due to my h1
I can't.
So basically the setup is:
HTML:
<div class="main-container">
<h1>This is a headline</h1>
<div class="content-container">
<p>Different stuff in here</p>
</div>
</div>
And the CSS could look like:
.main-container {
display: grid;
height: 100vh;
align-content: center;
justify-content: center;
}
And again, this would result in the two elements h1
and content-container
being centered together. But what I want to do is to center with respect to the main-container
so that is always in the middle, and the h1
is always some amount of pixels above. Is the only option to put the h1
tag inside the main-container
, and make it absolute?