CSS Tips

Centering a web page in the browser

Do you feel there's nothing to worry about centering a web page in the browser ? But it really matters when you are testing your website for browser compatibility. That is because browsers have default style sheets that are loaded automatically. These default style sheets work as foundation style sheets for other style sheets.

If you've ever tried to center a web page and tested it for different web browsers, you may have experienced issues with internet explorer.

For Chrome and Firefox 

Let's specify a main div tag for the main layout we are using. Then specify a style for that div tag.

Remember, this div should have a fixed width. 

But this styles definition will not work for internet explorer.

In order to overcome this issue you have to include the following css styles to your style sheet.

For Internet Explorer

The style should be given to body tag.

Then we have a little more work to do. We should specify text-align : left; for main div tag's style, otherwise it will inherit text-align : center; from the body and will try to center all the elements inside it.

So finally the basic html code and styles look like in the following code. I've used embedded styles for the easiness to  understand.

Below image shows how it  is displayed in the browser.