How To Centre A DIV Block Using CSS

How to Centre a DIV Block Using CSS by Christopher Heng, thesitewizard.com

This article shows you how to centre (or "center" if you use a different variant of English) a DIV block, whether it contains text, graphics, or a mixture of both, using standards-compliant Cascading Style Sheets (CSS). The technique is useful not just for creating pleasing designs, but also for times when you want to create a fixed width single column layout with the main content placed in the centre of the page, and not flushed to one side.

Assumptions

I will assume in this article that you have some basic knowledge of how to write HTML and CSS, and at the very least, know how to insert CSS code.

If you don't even have a website yet, and have arrived at this article looking for tips on designing one, please start with my article on How to Start/Create Your Own Website instead.

Steps to Centering a DIV Block without Centering the Text Inside

Let's assume that you have a div block written as follows:

<div id="content"> This is a block that is to be centred. I don't want the text to be centred, though, just the block. </div>

At first glance, you may think that the following CSS rule will work.

text-align: center ;

However, the rule centres the text inside the box, rather than the block itself. While there are times when you may want to do this, our intention here is to centre the entire block but leave the internal contents formatted as it was before. As such, the above code is not what we want.

Instead, the standard trick for centring ("centering") a block in CSS is to do the following:

1. Specify a width for the DIV block.
2. Set both its left and right margins to auto.

Both steps are necessary. You cannot just set the margins to auto without specifying the width of the block and expect this method to work.

For example, if you want your div block to have a width of 200 pixels, the following code will centre the block.

#content { width: 200px ; margin-left: auto ; margin-right: auto ; }

The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width. This is why you also have to specify the width of the DIV block, since browsers will otherwise set it to 100% of the available space. If all the space is occupied by the block, there's no need to centre it. Centring is only relevant if an object is smaller than the space around it.

Incidentally, the width doesn't need to be in pixels. Other units like em or percentage will work just as well. In addition, the technique also works on other block elements like <p>.

Demo

This is a block that is to be centred. I don't want the text to be centred, though, just the block.

Since the block is so small and shifted to the centre, I have added some colour to highlight it. I have also deliberately made it only 200 pixels wide, so that the effect will still be visible if you are viewing this on a mobile phone.

Browser Support

The code above has been tested with IE 6 to 11, Firefox, Chrome, Edge, Vivaldi, Opera and Safari. It should work in all later browsers as well, since the newer ones tend to be standards-compliant.

Conclusion

The method above is the standard technique for centring a DIV block using standards-compliant CSS. And the code even works in obsolete browsers like IE 6 and 7.

This article can be found at https://www.thesitewizard.com/css/center-div-block.shtml

Copyright © 2008-2024 by Christopher Heng. All rights reserved. Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

You are here: Top > Cascading Style Sheets (CSS) Tutorials and Tips > How to Centre a DIV Block Using CSS

Other articles on: CSS, HTML

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Pages

• How to Design a Two Column Layout for Your Website Using CSS
• How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes
• How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)
• How to Make Your Links Change Colour When the Mouse Hovers Over It (Using CSS)
• How to Accept Credit Cards on Your Website
• How to Register Your Own Domain Name
• Which Web Host Do You Recommend? (FAQ)
• The Myth of "Unlimited" in Web Hosting

New Articles

• How to Convert Your Website from XHTML 1.0 to HTML5 the Quick and Easy Way
• How to Set the Height of a DIV Relative to a Browser Window (CSS)
• How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
• How to Insert Meta Tags into a Web Page with BlueGriffon
• How to Play a Song (or Some Other Audio Clip) from a List on a Website
• How to Draw a Horizontal Line on a Web Page with Expression Web
• How to Create a Website Free of Charge
• Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
• What's the Difference Between a Domain Name Registrar and a Web Host?
• How to Make a Mobile-Friendly Website: Responsive Design in CSS

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

<a href="https://www.thesitewizard.com/css/center-div-block.shtml" target="_top">How to Centre a DIV Block Using CSS</a>

It will appear on your page as:

How to Centre a DIV Block Using CSS