Safe Centering Example from this article

if you make this window too small, the text at the top will crunch down and move the rectangular image down. In the original place where I used this code, all the divs were positioned absolutely; which would avoid this problem

The Javascript

var dw = {};

dw.stripPx = function(str) {
    return parseInt(str.substring(0, str.indexOf('p')));
};

dw.setStyles = function(el, style) {
    for(var i in style) {
        Dom.setStyle(el, i, style[i]);
    }
};

dw.safeCenter = function(item, region) {
    var halfWidth = Dom.getViewportWidth() / 2;
    var sWidth = dw.stripPx(Dom.getStyle(item, 'width'));
    var sHeight = dw.stripPx(Dom.getStyle(item, 'height'));
    var right = region['right'];

    /* item on right half of window                                              : or item on left half */
    var marginLeft = ((right-sWidth) > halfWidth) ? ((right-sWidth) - halfWidth) : (0 - (halfWidth - (right-sWidth)));

    var marginalAdjustments = {
        'vert'    : dw.stripPx(Dom.getStyle(item, 'marginBottom')),
        'horz'    : dw.stripPx(Dom.getStyle(item, 'marginRight'))
    };

    dw.setStyles(item, {
        'top'         : (region['bottom'] - sHeight  - marginalAdjustments['vert']) + 'px',
        'marginLeft'  : (Math.floor(marginLeft) - marginalAdjustments['horz']) + 'px'
    });
};

Event.onDOMReady(function() {

    var scroller = Dom.get('scroller');
    var region = Dom.getRegion(Dom.get('scrollable'));

    dw.safeCenter(scroller, region);
});

			

The CSS

div#scrollable {
    width: 500px;
    height: 300px;
    background-image: url('blobCentered.png');
    margin: 0 auto;
}

div#scroller {
    position: absolute;
    left: 50%;
    width: 48px;
    height: 58px;
    background-image: url('images/scroller.png');
    margin-right: 10px;
    margin-bottom: 10px;
}