1

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?

2 Answers 2

2

Correct. h1 should be absolute position. So, the best practice will be to move h1 inside the content-container, so that you can adjust the h1 position according to the content-container.

2

You can use position: absolute, or you can perform some transform translate property such as transform: translateY(20px)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.