Prevent a centered layout from shifting its position when scrollbar appears

I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.

A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.

If your site is "responsive" (reacts to width):

Step 1: Add width: 100vw to a wrapper element. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.

Step 2: Add overflow-x: hidden to the content element. This will remove the horizontal scrollbar (created when vertical scrollbar appears, to allow the user to "look under" it).

"wrapper element" is in our case referring to another div around your #content-wrap

Will work for your case too, tested:

<style type="text/css">
body {
    overflow-x: hidden;
}
#wrap-wrap {
    width: 100vw;
}
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>
<div id="wrap-wrap">
    <div id="content-wrap">
    </div>
</div>

Make sure nothing useful on your page is wide enough to get caught under the scrollbar.

For example, you can ensure that the sum of (horizontal padding + border + horizontal margin) of the content element is wider than the scrollbar).

If your site is fixed width + centered (your case):

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

This will add a left margin equal in width to the scrollbar when it appears. Which is 0 when it does not. Taken from here, but tested.