Wickham's HTML & CSS tutorial

Centering horizontally and vertically

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Centering a whole page in both directions

1a green icon This is the traditional method of centering vertically and in this example the same centering method has been used for horizontal centering. Make sure that you leave space all around in case the viewer uses a small screen resolution.

See this page which shows a photo centralised horizontally and vertically. This method is often used as the entry page to a site with a text link under the image or just using the image as a link as shown.

Since this example is position: absolute; it is best to have nothing else on the page, except perhaps a heading at the top, otherwise the centralised image is likely to show over other content at lower screen resolutions.

The code for the page in the link is:-

The negative margin adjustments are always half the div width or height. The text-align: center centralises the inner image in the div and the margin-top: 25px in the inner image style brings the image down to the center of the background-image; the margin-bottom: -3px is to remove a small space that some browsers create under an image.

The inner photo image has a gray background-image behind it. It could be a border in this example but I wanted to show that a background-image can also be used. This might be useful if the inner image was replaced by a div with text that is required to centralise over a background-image and then both the background-image and the text centralise on the page in both directions.

This works well for small centralised divs like the photo link but is unreliable for divs or images with a large width or height. It works well centralising at higher screen resolutions but at lower resolutions which are less wide or high than the div the negative margin-left takes the left edge out to the left beyond the screen edge and the negative margin-top takes the top off the top of the window. There is no way to scroll to reach the top or left.

1b green icon This is a better method of centering vertically and uses a different method for horizontal centering. It doesn't have the disadvantage that part of a page will be invisible because it has disappeared off the top or left side of a window where you can't scroll to see it.

See the tutorial on the WebDesign Pond website.

The HTML markup is:-

<div id="vertical"></div>
<div id="wrapper">
[Whole page content here]
</div>

The essential CSS codes are:-

html, body { height: 100%; margin: 0; padding: 0; }
#vertical { height: 50%; width: 1px; margin-bottom: -150px; /* half the wrapper's height */ float:left; }
#wrapper { margin: 0 auto; /* use only if also centering horizontally */ text-align: left; /* to set text back to default if already centering horizontally */ position: relative; height: 300px; width: 700px; clear: left; background-color: #00afdc; padding-left: 10px; }

The vertical centering uses the height: 100%; for html and body and then uses an empty #vertical div set at height: 50%; with a margin-bottom negative half the #wrapper height and float: left; then a #wrapper div which has position: relative; clear: left;.

The #wrapper div is centered horizontally using the conventional method described in item 2.

Centering only horizontally

2 green icon This site generally uses a containing div centralised horizontally with the following method.

The code is:-

<div class="container2">page content</div>

The stylesheet code is:-

.container2 { width: 730px; margin: auto; border: none; padding: 0; }

There has to be a div width for the margin: auto method and it works where no position is stated or position: relative or position: static divs but does not work with a position: absolute containing div.

If you have any position: absolute divs in the containing div you need to add position: relative to the containing div as this will make the position: absolute divs included inside it take their positions from the top left of the container (which will be in a different position on different screen resolutions) rather than the top left of the screen.

.container2 { position: relative; width: 730px; margin: auto; border: none; padding: 0; }

Instead of a class it could be id="container2"> in the html page and #container2 {...} in the stylesheet but there have been occasions where the container has been closed and reopened on the same page. Id is not supposed to be used more than once on a page. The margin: auto; creates flexible equal margins on each side to suit different screen resolutions.

3 gold icon Another method is similar to item 1a. The code would be:-

<div style="position: absolute; width: 730px; left: 50%; margin-left: -365px;">page content</div>

This method uses left: 50% where the page is fixed to the center with left: 50% then brought back left with margin-left:-365px; which is half the div width to centralise the middle.
There has to be a div width for this method. It works with position: absolute and with position: relative divs but not with position: static or where no position is stated.

This works well for small centralised divs like the photo link in item 1a but unreliable for divs or images with a large width. It works well centralising at higher screen resolutions but at lower resolutions which are less wide than the div the margin-left takes the left edge out to the left beyond the screen edge and there is no way to scroll to reach it.

4a green icon The following example shows how both items 2 and 3 are needed if a div is required to centralise in a space that is not central in the containing div. Item 4b has neater code but this example shows how methods in items 2 and 3 can be combined.
In the example the silver containing div #heading has a fixed width: 530px but the code for the right div #bannerad will set it in the center of any space between the #logo and the right side of #heading if #heading has a flexible width.
The margin: auto method item 2 is used for IE6 and IE7 and the left: 50%; margin-left: -*px method item 3 is used for Firefox because Firefox does not calculate margin: auto from the space available between divs like IE but from the overall boundaries of the containing div.
This method is useful if the containing div or page body has no stated width (ie flexible width) because the margin-left for #bannerad is only related to its own width and the fixed width of #logo while the left: 50% is related to #heading and as a percentage will position it in any containing div or body width.
Where the containing div has a fixed width there is no need to use either of items 2 or 3; you just calculate a margin-left for the right div #bannerad related to the containing div width and the #bannerad width.

Logo div 50 x 50 px

Banner Ad div centralised between logo and right side

The code for the style in the stylesheet or inside style tags in the head section is:-

The code for the body HTML is:-

<div id="heading">
<div id="logo"> Logo div 50 x 50 px </div>
<div id="bannerad"> Banner Ad div centralised between logo and right side </div>
<div class="noborder" style="clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px;"> </div>

</div>

Margin: auto can be used with IE which would never need adjusting if #bannerad changed width but unfortunately Firefox does not take margin: auto from the divs either side (ie #logo and the right side of #heading); it takes margin: auto from the overall width of the containing div so it would be central in #heading but not central between #logo and the far right.
That is why FF has to use a different centralising code of position: absolute; left: 50%; margin-left: -120px;
The position: absolute; left: 50%; margin-left: -*px; method does work with IE as shown in the link in item 1 and in item 4b but for this example using margin: auto; needs the addition of float: left; for #logo in an <!--[if ie]> style just for IE. If float: left; is omitted from the style of #logo then IE pushes #bannerad down below #ogo so a combination of items 2 and 3 with a conditional comment for IE has been used.

The styles are set in the main styles for Firefox and a separate <!--[if ie]> style set for IE.
The style for #heading needs position: relative so that the position: absolute in #bannerad can take its positioning within the #heading div and not from the whole page.
The <!--[if ie]> code for #bannerad needs to have all the attributes which are different cancelled, not just ignored; so position: absolute has to be contradicted with position: relative and left: 50% needs to be changed to left: 0; and the margins revised to auto which overrule the margin-left in the main style for Firefox and top revised to top: 0.

If the #heading div had side padding to create the space on the left of #logo then padding would also be created on the right of the div. This would mean that the margin: auto method used for IE would create a space of x between #logo and the left of #bannerad but a space of x + padding on the right of #bannerad. In the example I have no side padding for #heading but margin-left: 10px for #logo to avoid this problem.

4b green icon Another method that works with Firefox and IE which uses the left: 50%; margin-left: -*px; method for both IE and Firefox without needing a conditional comment for IE is shown below:-

Logo div 50 x 50 px

Banner Ad div centralised between logo and right side

The code for the style in the stylesheet or inside style tags in the head section is:-

The code for the body HTML is:-

<div id="heading2">
<div id="logo2"> Logo div 50 x 50 px </div>
<div id="bannerad2"> Banner Ad div centralised between logo and right side </div>
<div class="noborder" style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;"> </div>

</div>

It works in IE and Firefox. The difference from item 4a is that the same left: 50%; margin-left: -*px; method has been used for IE and Firefox so it does not need an <!--[if ie]> conditional comment.

Centering vertically within a div

5a green icon The first example shows centering vertically and horizontally of one div within a containing div. The negative margin adjustments are always half the div width or height and the container must have position: relative.

position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; margin-top: -50px; margin-left: -100px;

The code for the above example is:-

<div style="position: relative; width: 530px; height: 200px; background-color: #c0c0c0; margin: auto;">
<div style="position: absolute; top: 50%; left: 50%; width: 300px; height: 100px; margin-top: -50px; margin-left: -150px; background-color: #e9e9e2;">
position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; margin-top: -50px; margin-left: -100px;
</div>
</div>

The example below shows a <p> tag centralised only vertically.

This <p> tag has style="position: absolute; top: 50%; height: 20px; margin-top: -10px;"

The code for the above example is:-

<div style="position: relative; width: 530px; height: 100px; background-color: #c0c0c0; margin: auto;">
<p style="position: absolute; top: 50%; height: 20px; margin-top: -10px; background-color: #e9e9e2;">
This <p> tag has style="position: absolute; top: 50%; height: 20px; margin-top: -10px;"
</p>
</div>

5b green icon If you don't want to give a height to the inner div so that its height can be fluid in case someone increases text size only, which will increase the div height, use display; table; as shown in Display: table;.

For more examples of items 2 and 3 see Firefox / IE6 background display differences items 14 and 15.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

ie6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev | next