CSS Horizontal Center and vertical centering solution

First, CSS Center-Horizontal Center

Div and other tags themselves do not define their own center of the property, many of the online methods are introduced with the superior text-align:center, and then nested a layer of div to solve the problem.
But this method is sometimes completely ineffective and is a very unscientific approach to layout. The correct setting is written as follows (no effect on page construction):
div {margin-left:auto; margin-right:auto;}
This CSS center means that the div itself adjusts the distance between the left and right margin to achieve a horizontal center effect.
Sometimes we can also shorthand for div {margin:0px auto;}
But with this shorthand, if you adjust margin-top or margin-bottom, you lose the center-centered effect of the CSS.
In addition, if your div has not specified a width (can be a relative size), this CSS centered writing also does not have the effect, the solution is to assign a width width to the div, for example: Width:auto; Or width:50% or something like that.
At the same time, your page type, document type, must be declared as XHTML. As for the loose or strict does not affect.
This notation also applies to image IMG and some other box-like tags in the CSS center.
Finally, if you look different in IE and Firefox two browsers, you'd better use text-align:center; A method that is set with the margin two CSS centered. For example:
#layout {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }
Description: The text-align:center is defined first in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available. But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; "What needs to be explained is that if you want to use this method to make the whole page to center, it is recommended not to set in a div, you can sequentially split multiple div, as long as in each split div defined margin-right:auto; Margin-left:auto; You can do it.

Two. css centered-vertically centered

1. How do I make a picture center vertically in a div
For this CSS centering problem, we can use the method of setting the background image. Example:
Body {background:url ("sample.gif") #FFF No-repeat Center;}
The key is the center property, which indicates that the background picture is centered in the container. You can also change the Cener to top left or write the numbers directly to adjust its position.

2. How do I make text vertically centered in a div
For the text, you can not use the background method, you may use the method of increasing the spacing to achieve vertical center, the model code is as follows:
#center {Margin-right:auto;  Margin-left:auto;  height:200px;  Vertical-align:middle; line-height:200px; }
<div id= "center" ><p>test content</p></div>
Description
Vertical-align:middle the vertical center of the row, we increase the line spacing to as high as the entire Div, and then insert the text in the vertical center of the line-height:200px.

3. Css+div controls the vertical center of elements in the page, enabling global and regional CSS to be centered vertically
Demo Code:

<style type= "Text/css" media=screen>
Body
{
Text-align:center;
}
#a
{
width:200px;
height:400px;
Background: #000;
}
#b
{
Margin-top:expression ((A.CLIENTHEIGHT-50)/2);
width:50px;
height:50px;
Background: #FFF;
}
#c
{
Position:absolute;
Left:expression ((BODY.CLIENTWIDTH-50)/2);
Top:expression ((BODY.CLIENTHEIGHT-50)/2);
width:50px;
height:50px;
Background: #F00;
}
</style>
<div id= "a" >
<div id= "B" ></div>
</div>
<div id= "C" ></div>

Another CSS centering method:

<div style= "Background:blue;position:absolute;left:expression ((BODY.CLIENTWIDTH-50)/2); Top:expression (( BODY.CLIENTHEIGHT-50)/2);width:50;height:50″></div>

Add a CSS Horizontal vertical center method, this method is used in www.chinaret.com.

/*center panel*/

#LoginBar {position:absolute; left:50%; top:50%; Margin-top: -68px; Z-index:1; Margin-left: -150px; width:300px;

Height:156px;text-align:left;

CSS Horizontal Center and vertical centering solution