HTML Learning notes-all sorts of center-aligned

0. Prefacebasic method of horizontal centering--Specify the width of the block and set the left and right margin of the block to auto, the upper and lower margin is 0, then the block can be horizontally centered in the parent element. The styles are for example the following: 1:margin:0px Auto2:Margin-left:auto; margin-right:auto;Vertical Centering Basic method--the upper and lower margins of the set block are equal. The styles are as follows:padding-top:20px; padding-bottom:20px;
1.div Center Alignment"HTML"

<! DOCTYPE html>
"Effects"The "1" body has a block with an ID of all, the width of the block is 500px and the height is 200px. Center horizontally in the body by margin:0px Auto.
Figure 1 Div Center
Center text in 2.div"HTML"
<! DOCTYPE html>
"Effects"The "1" body has a block with an ID of all, the width of the block is 500px and the height is 200px. Center horizontally in the body. "2" has a block with an ID of string in the block named All. margin:0px Auto causes the block to be centered horizontally in the parent element.
Text-align:center makes
Figure 2 Div text is centered horizontally
3 Div Image Center "HTML"
<! DOCTYPE html>
"Effects""1" picture in the div centered method and text Similarly, the parent div set Text-align:center can be. The "2" assumes that the image is centered vertically, so you can set the top and bottom padding of the parent Div. such as padding-top:20px;padding-bottom:20px;
Figure 3 Horizontal center of image in Div
4. Center the contents of the table"HTML"--html notation
<! DOCTYPE html>
"Effects""1" <table align= "Center" > causes the table to be centered horizontally in the parent div. "2" <td align= "center" > The content in the cell is centered horizontally, notice that the contents of the cell are centered vertically by default.
Figure 4 Table content centered--html notation
"HTML" CSS notation
<! DOCTYPE html>
"Effects""1" table{margin:0px auto;}, so that the table is horizontally centered in the parent div "2" td{text-align:center;}, the cell content is centered horizontally, notice td{text-align:center;} and &LT;TD align= "center" > have the same effect. "3" effect and 4 see.
 References"1" For you to summarize the cliché of the---CSS Center "2" to achieve the vertical center of the text within the DIV layer
HTML Learning notes-all sorts of center-aligned