Centering Content with CSS

💡 The Concept

Knowing how to center elements with CSS is one of those fundamentals that comes up in nearly every project you build. If you’ve ever stared at a web page wondering why your content is stubbornly hugging the left side of the screen, you’re not alone. Centering content is one of the most common tasks in web design.

Understanding the Two Centering Techniques

Before diving into code, it’s important to understand that CSS treats inline content (like text, images inside a paragraph, and spans) differently from block-level elements (like divs, sections, and headings). Each type of content requires a different centering approach.

Centering Text with text-align

The text-align property centers inline content within a block-level parent element. This is the go-to technique for centering text, inline images, and other inline elements inside their container.

h1 {
  text-align: center;
}

When you apply text-align: center; to an element, all of the inline content inside that element gets centered. This includes text, <span> elements, <a> tags, and <img> elements that are direct children.

By placing text-align: center; on the parent div, both the heading and the paragraph text will be centered. This saves you from having to apply the property to every single child element individually.

The text-align property accepts several values:

/* Common text-align values */
text-align: center;   /* Centers the text */
text-align: left;     /* Aligns text to the left (default) */
text-align: right;    /* Aligns text to the right */
text-align: justify;  /* Stretches text to fill the full width */

Key point: text-align only works on inline content. It will not center a block-level element like a <div> that has a set width. For that, you need the next technique.

Centering Block Elements with margin: 0 auto

When you want to center a block-level element itself, like a <div> that serves as a page wrapper, text-align won’t help. Instead, you set the margin to auto on the left and right sides. The key requirement is that the element must have a defined width. Without a width, a block element naturally stretches to fill its parent, so there’s nothing to “center.”

It is much easier to style a web page if the content of the main section isn’t too wide. Here is how you center it using the individual margin properties:

main {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

Setting margin-left and margin-right to auto tells the browser to calculate equal space on both sides, which centers the element. You will often see this written as shorthand:

main {
  max-width: 960px;
  margin: 0 auto;
}

The shorthand sets the top and bottom margins to zero and the left and right margins to auto. Both versions produce the same result. Note that the first value does not have to be zero — you could write margin: 20px auto; to add top and bottom spacing at the same time as centering the element.

Note that in the example above we use max-width instead of width. If you were to force a width to 960px it would be too wide for mobile.

Quick Reference: When to Use Which

Here’s a simple way to remember which technique to reach for:

• Centering text or inline elements inside a container? → Use text-align: center; on the parent element.
• Centering a block-level element (like a div) on the page? → Give it a max-width and set margin: 0 auto;

Common Mistakes to Avoid

Watch out for these pitfalls when centering content:

• Forgetting to set a width. margin: 0 auto; does nothing if the block element doesn’t have a width. Without one, it already takes up 100% of the space.
• Using text-align: center on a block element expecting it to center the block itself. It only centers the inline content inside the element, not the element’s position on the page. For inline elements, you need to add display: block to the CSS.
• Using a fixed width without considering small screens. Prefer max-width over width for a more responsive result.

This video demonstrates how to center content on JSFiddle.

🎬 Video Demonstration

Exercise: Try It Yourself

Step 1. Open JSFiddle.

Step 2. Add this text to the HTML section of JSFiddle:

<h1> Why is the sky blue? </h1> 
<p> Sunlight contains all the colors of the rainbow. When sunlight enters Earth's atmosphere, it bounces off air molecules and scatters in every direction. Blue light has the shortest waves, so it scatters the most — which is why the sky looks blue to us. </p>

Step 3. Add <div id=”wrapper”> around the text in the HTML section. Don’t forget the closing </div> tag at the end of the text.

Step 4. Add this CSS to center the text. 

#wrapper { 
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

Run your fiddle and check your result against this screenshot:

Go Ahead and Center Everything

Well, beware that centering everything isn’t always the answer. Longer paragraphs look better as left aligned. However, a centered layout is a great way to get started in web design until you learn how to use stacking columns. It has a professional look.

★ Key Takeaways

Centering content on a page is one of the most common challenges in CSS. This lesson covered two core techniques: text-align for centering inline content inside a container, and margin auto for centering a block element on the page. Next, you will learn how to use CSS float to wrap text around images and position elements side by side.

← Back to Page Layout Lessons

← Back to All Lessons