Centering blocks with CSS

Table of contents

Related documents

Introduction

Authors that are beginning to use CSS to suggest formatting for their documents instead of using deprecated presentational HTML elements and attributes are sometimes stymied in their attempts to find styles that are equivalent to more familiar HTML behavior. In particular, one of the questions most frequently asked by these authors is: “How do I center blocks or other elements in CSS?”

This confusion may arise from several factors. Firstly, authors sometimes fail to recognize that CSS is precise in separating formatting of block level vs. inline elements For example, the text-align: property is meant to center inline text or other inline content, not to center an entire block (notwithstanding some incorrect implementations of this property by some popular browsers). Secondly, authors may not realize that most block elements are rendered differently than tables—most blocks tend to expand to fill the available width of the container, whereas tables will tend to “shrink-wrap” to fit the content (See the related document “Centering Tables,” which illustrates some of these differences.). Finally, poor implementation of CSS in some popular browsers has misled authors into believing that the incorrect behavior of those browsers is the right way to center content.

A useful way for authors to think about centering block level elements is, literally, to “think outside the box;” that is, centering can be thought of as a property of the left and right margins. Thus, a block level element will be centered if the left and right margins are equal.

The purpose of this document is to demonstrate some methods for centering content using CSS, to illustrate some pitfalls caused by non-compliant browsers, and to suggest some possible work-arounds for these problems.

The behavior of the following browsers was noted: Microsoft Internet Explorer v. 7.0 (MSIE7), Opera v. 9.0 (Op9), Safari v.3.0, Firefox v. 2.0 (Ff2) on a WinXP PC; Microsoft Internet Explorer v. 5.5 (MSIE5), Microsoft Internet Explorer v. 6.0 (MSIE6), Opera v. 6.01 (Op6), Opera v. 7.1 (Op7), Mozilla v. 1.4 , Netscape Navigator v. 6.1 (NS6.1), or Netscape Navigator 4.0 (NS4) on a Win98 PC; and Microsoft Internet Explorer for the Macintosh v. 5.0 (MacIE5), Netscape Communicator 4.7 (NS4: given the same abbreviation as Netscape 4.0 on Win98 because in these examples they behaved similarly), Safari v. 1.1 (both the Windows version and Macintosh version had the same behavior in these tests), or Opera v. 5 (Op5) on a Macintosh.

N.B.: Some newer browsers, such as Microsoft Internet Explorer v. 6–7, Microsoft Internet Explorer for the Macintosh v. 5.0, the “Gecko” family (Firefox, Mozilla, Netscape Navigator v. 6.1 and up), and Opera, v. 7 and up, change the way in which they render markup depending on which doctype declaration is used. In some cases, documents are rendered according to current W3C standards (“Standard Mode”), at least more or less, whereas in other cases, documents are rendered in a manner that emulates bugs in older browsers (“Quirk Mode”). Whereas a discussion of the details of this “Doctype switching” is beyond the scope of this document, interested readers can refer to articles on this subject written by Matthias Gutfeld or Henri Sivonen.

This document uses a doctype declaration which is expected to trigger “Standard Mode” in those browsers. A companion document which uses a doctype declaration which triggers “Quirk Mode” is also presented for convenience.

Standards-compatible methods for centering blocks.

The first two examples demonstrate centering methods that ought to work in CSS-compliant browsers.

Example 1: Flexible paragraph with defined-width margins.

This example centers a paragraph using the following style:


.center1
{
margin-left: 20%;
margin-right: 20%;
}

… which suggests that the paragraph have left and right margins that are defined as 20% of the width of the container. The paragraph renders as follows:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This paragraph is centered by all the browsers used in this test (yes, even by Netscape 4). Moreover, this style suggestion also has the advantage of allowing the content to adapt to the width of the browser window.

Example 2: Defined-width paragraph with flexible margins.

This example centers a paragraph using the following style:


.center2
{
margin-left: auto;
margin-right: auto;
width: 60%;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This paragraph was centered by MSIE6–7, MacIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1, but not by MSIE5 or by NS4.

A “hack” to trick MSIE5 into centering fixed-width blocks.

Microsoft Internet Explorer v.5 for Windows is known to misinterpret the CSS declaration {text-align: center} applied to block elements by centering the entire block element. The next two example will demonstrate how to use this behavior to center fixed-width block elements in MSIE5.

Example 3

The following paragraph is surrounded by a <div> which is styled as follows:


.center3
{
text-align: center;
}

… whereas the paragraph is styled as follows:


.center2
{
margin-left: auto;
margin-right: auto;
width: 60%;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

The text in this example was centered, not unexpectedly, within the paragraph, due to the declaration of {text-align: center} applied to the surrounding <div>. However, in all browsers tested—except for NS4—the paragraph itself was also centered. This is because the {margin-left: auto; margin-right: auto;} declaration applied to the paragraph will center the block in CSS-compliant browsers, and the {text-align: center} applied to the <div> will center the block in MSIE5. Now to correct the text-centering within the paragraph, it is necessary to apply a declaration of {text-align: left} to the paragraph, as illustrated in the next example.

Example 4:

In this example, the outer <div> is styled as in example 3, and the paragraph is styled as follows:


.center2a
{
margin-left: auto;
margin-right: auto;
width: 60%;
text-align: left;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

The text in this paragraph is aligned to the left in all browsers tested, and the paragraph itself is centered by all browsers tested except by NS4.

A nonstandard solution that works with some browsers.

The following example uses a misinterpretation of the {text-align: center} declaration applied to the <div> surrounding the paragraph. This example is not to be recommended, and in fact ought not to center the paragraph in compliant browsers, but is shown to demonstrate some browser bugs.

Example 5

The following paragraph is surrounded by a <div> which is styled as follows:


.center3
{
text-align: center;
}

… whereas the paragraph is styled as follows:


.left1
{
width: 60%;
text-align: left;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This paragraph was centered by MSIE5, MSIE6, and MSIE7. All other browsers tested correctly aligned the paragraph to the left.

Conclusions

Authors who wish to center block-level elements are encouraged to use the method described in Example 1. This is the only method that will center the paragraph in all the browsers tested here, both in “Standard mode” and in “Quirk mode.” Additionally, the use of a flexible-width paragraph allows the document to adapt to the width of the browser window and to the user's default text size. If the goal is to center the entire page with equal-width margins, then a similar declaration can be applied to the <body> itself (as I have done here).

If it is necessary, for some reason, to center block elements of fixed size, then the either the method described in Example 2 can be used, if compatibility with MSIE5 is not required, or the method in Example 4 can be used if centering in MSIE5 is desired.

Finally, if one is attempting to center a table, the difference in its formatting model may render the method in Example 1 unsuitable. Interested readers should consult the document “Centering tables” for examples of centering tables.