How to make a webpage land at the middle section?

Question

Need some idea that how can I make my webpage land in the middle. Like if someone start the page he/she should landing in the middle of webpage.

body{
    margin: 0;
}

.top{
    width:100vw;
    height: 100vh;
    background-color: red;
}

.mid{
    width:100vw;
    height: 100vh;
    background-color: green;
}

.bottom{
    width:100vw;
    height: 100vh;
    background-color: blue;
}

<!DOCTYPE html>
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="top">how to land at the middle of webpage</div>
    <div class="mid">How to land in this green coloured section</div>
    <div class="bottom">Please help me</div>
</body>
</html>

Does this answer your question? [How can I vertically center a "div" element for all browsers using CSS?](https://stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css) — GucciBananaKing99, Aug 09 '21 at 12:52
The marked duplicate is about vertically center; not how to scroll to the middle? — 0stone0, Aug 09 '21 at 12:55
this is duplicate, but from: https://stackoverflow.com/questions/24390205/jquery-scroll-to-class-name — Masoud Tahmasebi, Aug 09 '21 at 12:56
Who closed this did not understand question because it is not css style question. In case you are still looking for answer check this https://stackoverflow.com/questions/7846520/how-can-i-make-sure-that-a-web-page-opens-up-with-scrollbar-in-the-middle — Evren, Aug 09 '21 at 12:58

score 0 · Answer 1 · answered Aug 13 '21 at 07:14

You can use scrollIntoView, to get scrolled to the .mid div automatically.

let mid = document.querySelector(".mid");


mid.scrollIntoView({behavior:"smooth"});

body{
    margin: 0;
}

.top{
    width:100vw;
    height: 100vh;
    background-color: red;
}

.mid{
    width:100vw;
    height: 100vh;
    background-color: green;
}

.bottom{
    width:100vw;
    height: 100vh;
    background-color: blue;
}

<!DOCTYPE html>
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="top">how to land at the middle of webpage</div>
    <div class="mid">How to land in this green coloured section</div>
    <div class="bottom">Please help me</div>
</body>
</html>

@krishnakanta Hope this answers your question. – TechySharnav Aug 13 '21 at 07:17 — TechySharnav, Aug 13 '21 at 07:17

How to make a webpage land at the middle section?

1 Answers1