HTML: Making a link lead to the anchor centered in the middle of the page

Question

I have a link to an anchor on my html page. When the link is clicked it causes the page to scroll to the anchor so that the anchor is at the very top of the visible part of the page. How can I make the page scroll so that the anchor will be in the middle of the page?

Answer 1

I found a solution Anchor Links With A Fixed Header posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.

<span class="anchor" id="section1"></span> <div class="section"></div> 

then put the following css code

.anchor{   display: block;   height: 115px; /*same height as header*/   margin-top: -115px; /*same height as header*/   visibility: hidden; } 

Thanks, Phillip!

Answer 2

Place a <span class="anchor" id="X"> then style the anchor class like:

.anchor {   position: absolute;   transform: translateY(-50vh); } 

With -50vh the anchor will scroll in the middle of the screen.