Fix DOM twitching of javascript elements?

Question

css

In general, when I align elements through js, add indents, etc. then when loading, even fast, you can still see that the elements are twitching.
For example: to center-align a block with a non-fixed height, I write css:
center {
position: absolute;
top: 50%;
left: 50%
}
and js:
center.style.marginTop = -center.clientHeight / 2 + 'px';
center.style.marginLeft = -center.clientWidth / 2+ 'px';
Well, everything works fine, but when loading and navigating through the site menu, jerks are visible, and they are not very pleasant.
Start at home location, then jump into place as js loads. Whatever I did, I inserted scripts into the head, hung such things on window.onload, even prayed, and still I can’t solve this problem. Please tell me how such things are solved?

Answer 1

It is possible to make elements initially invisible (using opacity or visibility) and only show when they are already positioned.