Example
The code is as follows: |
Copy 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/5o/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8 & Prime;/> <Title> center content </title> <Style type = "text/css"> . Box {width: 600px; height: 100px; border: 1px solid #000; vertical-align: middle; display: table-cell ;} </Style> </Head> <Body> <Div class = "box"> <P> Untitled Document No title document no title document </p> </Div> </Body> </Html> |
Test file index.html code. Replace the style.css file address of another part.
The code is as follows: |
Copy code |
<Html> <Head> <link href = "style.css" rel = "Stylesheet" type = "text/css"/> <Body> <Div id = "wrap"> </div> </Body> </Html> |
1 (style.css ):
The code is as follows: |
Copy code |
* {Margin: 0; padding: 0;}/* Top alignment */ # Wrap { Position: relative; Width: 988px; Margin-left: 50%; Left:-494px; Height: Pixel px; Border: solid 1px red; } |
Comment: This method first sets the width of the content, and then pulls back half of the width of the content to the left, which is 50% away from the entire browser.
((Style1.css ):
The code is as follows: |
Copy code |
* {Margin: 0; padding: 0 ;} Body {text-align: center ;} # Wrap { Position: relative; Margin: 0 auto; Width: 988px; Height: Pixel px; Text-align: left; Border: solid 1px red; } |
Comment: This method is to set the content width first, then center the content in the body, and then align the content in the container to the left. Note that margin: 0 auto is used to ensure compatibility with other browsers.
Optional 3 (style2.css ):
The code is as follows: |
Copy code |
* {Margin: 0; padding: 0 ;} # Wrap { Position: relative; Width: 988px; Margin-left:-494px; Left: 50%; Height: 100%; Border: solid 1px red; } |
Comment: It is similar to Method 1. You can check the method 1.