how to center a site without using the <center> element (depreciated)?

Posted on 2008-11-07
Last Modified: 2012-05-05
I would like my site to be centered when requested. So, regardless of the user's monitor size, the site is always in the center.

I tried using the HTML element <center>; it does work; but it breaks some part of the site.

Given the example below, what would you add to the CSS or HTML to display it in the center of the page?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


<style type="text/css">

#container { width: 750px; }

#navigation { width: 100%; height: 1em; float: left; }

#navigation li { display: inline; }

#navigation li a { padding: .25em 1em; float: left;}

#main { width: 500px; float: left; }

#subsection { width: 200px; float: right; }




<div id="container">

<ul id="navigation">

<li><a href="">Home</a></li>

<li><a href="">About</a></li>

<li><a href="">Stuff</a></li>


<div id="main">

<p>Duis aute irure dolor ullamco laboris nisi in reprehenderit in voluptate.

Ut labore et dolore magna aliqua. .</p>

<p>Sunt in culpa velit esse cillum dolore qui officia deserunt. Eu fugiat


pariatur. Excepteur sint occaecat lorem ipsum dolor sit amet, sunt in culpa.

Velit esse cillum dolore quis nostrud exercitation duis aute irure dolor.

Ut enim ad minim veniam, excepteur sint occaecat sunt in culpa.</p>

<p>In reprehenderit in voluptate. Quis nostrud exercitation ut labore

et dolore

magna aliqua. Excepteur sint occaecat lorem ipsum dolor sit amet, cupidatat

non proident. Qui officia deserunt quis nostrud exercitation velit esse cillum

dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>


<div id="subsection">

<p>Omnis dolor repellendus. Et quasi architecto beatae vitae consectetur,






Open in new window

Question by:epifanio67
    LVL 3

    Expert Comment

    body align="center"
    or css body { text-align:center; }
    should work
    LVL 6

    Accepted Solution

    several options using div tags:
    LVL 30

    Expert Comment


    The correct way is to use auto margins like so:

    #container {
    margin:0px auto;
    width: 750px


    Author Closing Comment

    the link gave me the clues.... got the answer... thx

    margin: auto


    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now