I have been trying to solve this problem for 2 months now. Results 0. I am writing now the court. So, we have a certain <div id="header"> immediately after the body. After it there is such a block <div id="cent-block"> . Intuitively, the header lies at the very top of the document.

Our goal: to position the cent-block exactly in the middle of the screen.

What I have done for this:

 var i = document.documentElement.clientWidth; element = document.getElementById("header"); var i2 = element.offsetHeight; element = document.getElementById("cent-block"); var i3 = element.offsetHeight;

A la computed the height of each block, including the height of the entire document. Then I subtract the height of the second block from the height of the entire document (i.e. the caps)

  i = i - i2;

Then subtract from the resulting height of the central unit.

 i = i - i3;

And in the end divided into two equal parts.

  i = i/2

Pose what recorded the result.

 document.getElementById("cent-block").style.marginTop = i+"px";

Which did not appear. I beg you to help. Thank you all for your attention.

  • In my opinion, clientWidth needs to be replaced with clientHeight . In general, why not use CSS? - Surfin Bird
  • CSS? And I do not have the exact size. How will I calculate what I need? Thanks It works. - Lite Support
  • I would use flexbox with its align-items and justify-content , adding fallback for old browsers so that they have a block, say, 200 pixels from the top. Although, of course, you can instead wrap the block in a single-cell table and vertical-align:middle instead. - Surfin Bird
  • @LiteSupport rubber, for that and rubber, to drag on the screen size automatically. Look towards flex - Vasily Barbashev

0