/w3school/htmldom/prop_style_verticalalign. HTM (W3C standards, the concept of the manual is very important oh)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
first of all, is still a concept. Introduce inline elements and block-level elements, this is very important, because of some attributes can only be used for block elements, while others on the contrary, in some cases, they also can be mutual transformation, for example to be set in the display.
inline elements (also called inline element is an inline element) :
1) do not occupy an entire line, along with the content, has the following characteristics:
(2) can not be set width is high, also can not set the line height, its width as content increased, the height changes according to the font size.
(3) inline elements can be set up outside the border, but not up and down outside the boundary, only around for work.
(4) can be set within the boundaries, but the internal boundary in ie6 doesn't work, can only work on left and right sides.

the commonly used inline element is
code is as follows:


<Div style="width: 500 px; height: 200 px; background - color: # 39 f; text - align: center" >
<Img SRC="http://www.jb51.net//css/dog/134906m121hqwumyw3uudc.jpg" width="96" height="80"/>
<Div style="width: 100 px; height: 50 px; background - color: # F69; display: table - cell; vertical - align: middle" > La la la </div>
</div>

run screenshot:

this is an attribute of the block element internal processing, can't put this piece of yourself in its centered within the parent container, if you want to block in the parent element to realize the middle and you can use:

2 horizontal center block element itself (sure set the width of the block) : the margin. This is definitely contact CSS knew from the start.
normally, you can set the margin: 0 auto; This will make the block-level element center in its parent element, and the up and down or so will be centered.
if as long as the horizontal center, is set margin - left: auto; Margin - right: auto;

3 horizontal center block element itself (not sure the width of block) :
in other articles, see there are many ways to introduce uncertainty in the width of the piece.
simple point said, actually do not need to bother. We can understand it this way, there is no clear set the width of the block, according to the nature of the block-level elements, it is exclusive line of default, so this time of the block is the width of the browser window itself, there would be no need to set the horizontal center.
if this time to center the contents of the block:
if a block element's child elements for block elements, also has child elements using margin auto kind of way is ok;
if a block-level element's child elements as inline elements, with we at first introduce the text - align can solve;
child elements for block elements, you can also use the display Settings for the inline with the text - align.
(as elsewhere in the article are said)

4 vertical - align for inline elements in the vertical center
vertical - align, this can be used is very complex. Saw some articles and examples, and she is a little confusion, only said the most simple usage:
this attribute for the
1, inline elements (and is converted to an inline element block elements)
2. The display is set to the table - cell element,
in firefox and Internet explorer, you can set the display value of the block-level element to the table - cell, to activate the vertical - the align attribute, display effect and the like in the table valign=" Center" The same. But Internet explorer 6, 7 is not supported.
3, <Td> <Tr>
written as such elements: vertical - align: middle; You can set the vertical center of words or images. Has the character of inline elements as long as the elements using the attributes, child elements of it in the words and pictures also play a role. But effect is relative to words or pictures close to their parent element for center. This text - and align the above said parts are similar.

5 block-level element text images in the vertical center (in view of the highly determined block, this is from another blog see, really very practical oh, if only the text within)
text in layer (block-level elements) in the vertical center vertical - the align attribute is made. We here have a clever way: set the height of the height and the height of the line - height is the same!  

  code is as follows:  


<Div style="line - height: 500 px, height: 500;" > </div>

6 block level elements in the text image vertical center (block highly uncertain)
in a piece of highly uncertain, but it is highly depends on the height of the content inside. If internal only words or pictures, that is natural vertical center, actually don't need to deliberately to set.
if you don't want to set up anything, like pieces of a few bigger, vertical center look better in the block, you can set the padding, such as padding - top: 20 px; Padding - bottom: 20 px;
of course, if the padding is set up and down, nature is not centered.

7 block-level element's vertical center
set the block-level element itself in the vertical center of the parent element, can consult the block-level element level centered approach (mentioned above), set up from the outside. If you don't want to set the horizontal center, just set up from the outside to auto.
can also be the vertical - align: middle; Way, but the premise is to put the display Settings for the table cell. So attention should be paid to the browser compatibility problems.
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
hope to have friends in comments posted address refer to the article, now to then look at some of the post, only a portion of, many saw it randomly. Is neglected, it should be down at that time is ~
http://www.blueidea.com/tech/web/2006/3231.asp [CSS to achieve perfect vertical center] http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html

CSS center methods 】 【 【 perfect solve the CSS page horizontally centered 】 http://www.php100.com/html/webkaifa/DIV_CSS/2010/0826/5303.html
/CSS/HTML [various CSS center – – how to write high quality code.
there are many &other; Baidu know &throughout; ...
some more complex flexible usage, there is no written up, can only ensure that summarizes all of these are used and tried, more commonly used and basis, should be no problem. Also please advice yet ~
and use of this part of the position, in a few days, try again later to do some further notes ~


This concludes the body part