Several implementation methods of CSS horizontal and vertical centering

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: First defines the text-align:center 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 to make the picture centered vertically in the div to the center of the CSS, 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 to make the text vertically centered in the 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 sample 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; mean vertical center in row, We add the line spacing to the same height as the whole div, and then insert the text line-height:200px the vertical center.

3. Css+div controls the vertical center code of elements in the page, enabling global and regional CSS to center vertically on the 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 centering method ,

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

Height:156px;text-align:left;

< Span lang= "en-US" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >!--[if!supportlinebreakn ewline]-->
!--[endif]-->

Several implementations of CSS horizontal and vertical centering