Setting the context in the center for any resolutions ...

I have something like the following. This is where the main content goes.

	#screen {
            margin: 0px;
            padding: 0px;
            height: 675px;
            width: 900px;
        }
	#picture {
            position: absolute;
            margin-left: 0px;
            margin-top: 0px;
            width: 450px;
            height: 675px;
            background: #000;
	}
	#text {
            position: absolute;
            left: 450px;
            margin-top: 0px;
            width: 450px;
            height: 675px;
            background: #000;
            filter: alpha(opacity=70);
            opacity: 0.7;
	}

Code (markup):

Now I want to place this in the center of the screen using CSS. I'm pretty sure that this is rather elementary for CSS experts, but ... I can't quite figure out. How can I do this ...???

 

First, get rid off the absolute positioning. It is not needed to center an element.

Add the following line of CSS to the screen ID.

margin: 0 auto;

Code (markup):

That should be it.