CSS text centered attributes are simple and can be achieved, that is to set the text - align: center. And I'm here &other; Elements throughout the &; Actually refers to a container, if you want to have a pertinent point label, it should be able to use div to said.
elements horizontally centered, believe that will be familiar for many web designers. But sometimes, I just think, why make elements horizontally centered? For what reason? Is his own insights, write down pretty...

first of all, should let elements horizontally centered, you must have to learn CSS fixed layout and flow distribution in the design of the two concepts. The visual difference between them is whether to set the width to elements. Here are two pieces of code, which is used to simply show difference between fixed layout and flow distribution. Fixed layout demo:
1
code is as follows:


<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> The position - layout
<Style type="text/CSS" >
wrapper {width: 750 px; Position: relative; Margin: 0 auto; The text - align: left; }
contentArea {width: 450 px; Position: absolute; Top: 0; Left: 150 px; Height: 500 px; Background: # 96 c; }
leftPanel {width: 150 px; Position: absolute; Top: 0; Left: 0; Height: 500 px; Background: # 999; }
rightPanel {width: 150 px; Position: absolute; Top: 0; Left: 600 px; Height: 500 px; Background: # 6 c; }
</style>
</head>
<Body>
<Div class="wrapper" >
<Div class="contentArea >" </div>
<Div class="leftPanel >" </div>
<Div class="rightPanel >" </div>
</div>
</body>
</html>

2, fluid layout demo:

code is as follows:


<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> Col3 - margin - layout
<Style type="text/CSS" >
contentArea {160 margin: 0 px; Height: 500 px; Background: # 96 c; }
leftPanel {width: 150 px; Float: left; Height: 500 px; Background: # 999; }
rightPanel {width: 150 px; Float: right; Height: 500 px; Background: # 6 c; }
</style>
</head>
<Body>
<Div class="wrapper" >
<Div class="leftPanel >" </div>
<Div class="rightPanel >" </div>
<Div class="contentArea >" </div>
</div>
</body>
</html>

by the above two examples, can draw
code is as follows:


<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> The position - layout
<Style type="text/CSS" >
wrapper {width: 750 px; Margin: 0 auto; Position: relative; }
contentArea {width: 450 px; Position: absolute; Top: 0; Left: 150 px; Height: 500 px; Background: # 96 c; }
leftPanel {width: 150 px; Position: absolute; Top: 0; Left: 0; Height: 500 px; Background: # 999; }
rightPanel {width: 150 px; Position: absolute; Top: 0; Left: 600 px; Height: 500 px; Background: # 6 c; }
</style>
</head>
<Body>
<Div class="wrapper" >
<Div class="contentArea >" </div>
<Div class="leftPanel >" </div>
<Div class="rightPanel >" </div>
</div>
</body>
</html>

through the code, can be found, in this way in the current various mainstream browsers, including ie 6) can very good show, only under ie6 version does not take effect, element is arranged to the left. If not consider low version of the browser's problem, then it will be the most convenient.
2, centered text and automatically from outside using the
code is as follows:


<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> The position - layout
<Style type="text/CSS" >
body {text - align: center; }
wrapper {width: 750 px; Position: relative; Margin: 0 auto; The text - align: left; }
contentArea {width: 450 px; Position: absolute; Top: 0; Left: 150 px; Height: 500 px; Background: # 96 c; }
leftPanel {width: 150 px; Position: absolute; Top: 0; Left: 0; Height: 500 px; Background: # 999; }
rightPanel {width: 150 px; Position: absolute; Top: 0; Left: 600 px; Height: 500 px; Background: # 6 c; }
</style>
</head>
<Body>
<Div class="wrapper" >
<Div class="contentArea >" </div>
<Div class="leftPanel >" </div>
<Div class="rightPanel >" </div>
</div>
</body>
</html>

here, the text - align: center was used as a hack, to use, because it belongs to the style of the text, to implement the elements that can be used in the body centered style, do not belong to oneself should do...

3, negative margin method code is as follows:


<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> Negative margin - element - center
<Style type="text/CSS" >
wrapper {width: 750 px; Position: relative; Left: 50%; Margin - left: - 375 px; }
contentArea {width: 450 px; Position: absolute; Top: 0; Left: 150 px; Height: 500 px; Background: # 96 c; }
leftPanel {width: 150 px; Position: absolute; Top: 0; Left: 0; Height: 500 px; Background: # 999; }
rightPanel {width: 150 px; Position: absolute; Top: 0; Left: 600 px; Height: 500 px; Background: # 6 c; }
</style>
</head>
<Body>
<Div class="wrapper" >
<Div class="contentArea >" </div>
<Div class="leftPanel >" </div>
<Div class="rightPanel >" </div>
</div>
</body>
</html>

first of all, let the container 50% relative documents to the right offset, and then sets the container's left out from the negative half of the width of the container, the element can be realized in horizontal center display. This way no hack, and the compatibility is very good, can in the most widely browser performance under the agreement.
that's all I know, three methods of centring elements level are relatively simple, written down is just a retrospective summary of knowledge.


This concludes the body part