Margin: 0 auto center

I haven't kept a diary for a long time. In the final analysis, I haven't learned for a long time. I 've been working and using margin for a long time. I 've been depressed for a long time. I 've read a lot of questions and answers online, finally, let's take an example and study it. In fact, div center is not that difficult!

CopyCodeGo to notepad and change it to an HTML suffix.

Code

< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8"   />
< Title > Untitled document </ Title >
</ Head >

< Body >
< Div Style = "Height: 300px; Background: # CCC ;" >
< Div Style = "Width: 50px; Height: 50px; Background: # f00; margin: 0 auto ;" > </ Div >
</ Div >
</ Body >
</ Html >

 

Opening the page found that the small square is not centered! Then we create a new default page in DW (the document type is XHTML 1.0 transitional) and copy its header declaration information.

Code

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8"   />
< Title > Untitled document </ Title >
</ Head >

< Body >
< Div Style = "Height: 300px; Background: # CCC ;" >
< Div Style = "Width: 50px; Height: 50px; Background: # f00; margin: 0 auto ;" > </ Div >
</ Div >
</ Body >
</ Html >

 

 

Run it! It is very simple, but it is very practical to share with you.