Vertical Centering with CSS

Here is a site that illustrates what I am trying to do.

LINK-
http://www.bryanallenphoto.com/

The content is displayed in the exact center (both horizontally and vertically) no matter what the size of the viewport… even if it is resized after the page loads.

I know that margin: 0 auto would center the content horizontally but what snippet of CSS would center the content vertically without knowing the height of the browser’s viewport?

Todd

       function openWindow ( linkURL, windowWidth, windowHeight, haveToolbars, url_for_google ) {
            var width = screen.width;
            var height = screen.height;
            myWindow = window.open( linkURL,'htmluploadWin','toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars='+haveToolbars+',resizable=yes,top=0,x=0,y=0,left=0,width='+windowWidth+',height='+windowHeight);
            [COLOR="Red"]if (myWindow) {
                myWindow.moveTo( (width-windowWidth)/2, (height-windowHeight)/2 );
            }[/COLOR]

try w/o js and see what landing page you get to.

a quick search would lead you here :slight_smile:

Can it be done with CSS alone?