In your 'kolarthy' web page, your gallery is the only element on the web page and it fills the entire web page with dimensions of 100% x 100% (so, technically, it is horizontally centered).
Using style="margin: 0 auto;" will horizontally center a div within its parent div.
The gallery has a width of 100% (so it spans the entire width of its parent div) and its parent div is the body tag (so the gallery spans the entire width of the web page).
The main images within the gallery are not centered within the image area (they are offset to the left) as your gallery sets imageHAlign="LEFT".
If you want a narrower gallery, horizontally centered, then reset imageHAlign to 'CENTER' (its default value), change your galleryWidth from '100%' to a smaller percentage or a fixed pixel value such as '800' and continue using <div id="juicebox-container" style="margin: 0 auto;">. You'll see that your gallery is horizontally centered on your web page.
(If you then remove style="margin: 0 auto;" and use just <div id="juicebox-container"> instead, you'll see the gallery is justified to the left hand side of your web page.)
If you were to replace the SimpleViewer embedding code in your 'galleryBW' web page with Juicebox embedding code (and set your galleryWidth to '100%'), your Juicebox gallery will replace your SimpleViewer gallery and, with a width of 100%, it will span the entire width of its parent div.
Instructions for embedding a Juicebox gallery into an existing web page alongside other content can be found here.
Hopefully this will help.
Please let me know if you get stuck with anything.