Keep page centered

[GruntzMaster1]

Hello, I am working on a website for school, and I am trying to figure out the html/css coding that would allow for items on a page to remain centered on the browser screen, even if the browser screen is scaled up or down.

Here are two examples of what I am trying to accomplish: [link1](http://www.comingsoon.net “”) and [link2](http://lessframework.com “”) Both are always centered, even if the screen is resized smaller or larger, while obtaining an even amount of background color on either side of the background image (link 1 shows this more).

The first link shows the background image and the navigation and the sections somehow able to stay centered, even if I drag the browser screen larger or smaller (mainly larger). What I find really interesting and what I am hoping someone can help me with, is how to they make it so that there is an even space of background color on either side of the main background image and elements, every time the screen is resized?

Is this an html coding, or is it css? I would prefer for someone to either type the coding down or send me a good link that describes the process that I am trying to achieve.

Thanks for your help and time!

[Paulie_D]

All it needs is for the content to be wrapped in an element (usually a div) and it will have a set width and for the margin to be set to auto.

These divs are usually called wrappers or containers.

Here’s an example…in this case, because I wanted multiple sections, I use a class called `inner`…it works the same.

http://codepen.io/Paulie-D/pen/oGKtA

[GruntzMaster1]

How would I do this if I have a background image that is setup in the css file, and an image hyperlink in my html file?

For example: My background image is a specific size, and is setup from my CSS file, and I want to center it just like you mentioned above.

Another example: I have an image hyperlink that is setup in my HTML file, and I want it to have specific coordinates (left, top, right, bottom) to display at a specific spot on my background image. Can your method above work with an image that has specific coordinates?

[Author]

Posts