How to competently implement 1 landing screen in the entire height of the browser?

Question

css

Hello!
Given:

<div class="box">
      <p class="title">ТЕКСТ</p>
      <p class="info">ТЕКСТ2</p>
      <div class="button">
        <a href="">КНОПКА</a>
      </div>
    </div>

.box {
                 padding-top: 20vh;
                 height: 100vh;
        }
       .button {
           margin: 12vh auto 0;
       }

Question: How to properly adapt?
Made through media requests for width, then noticed that the button often climbs beyond 1 screen.
So far I see a solution through media queries by height.
Maybe there is a more beautiful solution so that the button fits into 1 screen?

Answer 1

I'm not an expert, but bootstrap will definitely help :)

Answer 2

Make the .box flex, wrap the insides in another container and center it. Somewhere like this:

.box {
    display: flex;
    width: 100%;
    height: 100vh;
}
.box__inner_wrap {
    display:  block;
    width: 100%;  // или какая нужна
    margin: auto;
}

For other elements, you already adjust the sizes, indents, and so on. Use media queries to fit the screen sizes you need.