First: Full CSS control and Layer Floating (applicable to login pages)
The Code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" <br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "gb2312"> <br/> <pead> <br/> <title> center demo </title> <br/> </pead> </P> <p> <MCE: style type = "text/CSS" Title = "currentstyle" Media = "screen"> <! -- <Br/> # divcenter {<br/> position: absolute;/* Layer Floating */<br/> top: 50%; <br/> left: 50%; <br/> width: 300px; <br/> Height: 300px; <br/> margin-top:-150px; /* Note that this must be half the DIV height */<br/> margin-left:-150px;/* this is half the DIV width */<br/> background: yellow; <br/> border: 1px solid red; <br/>}< br/> --> </MCE: style> <style type = "text/CSS" Title = "currentstyle" Media = "screen" mce_bogus = "1" ># divcenter {<br/> position: absolute; /* floating layer */<br/> top: 50%; <br/> left: 50%; <br/> width: 300px; <br/> Height: 300px; <br/> margin-top:-150px;/* Note that it must be half of the DIV height */<br/> margin-left:-150px; /* this is half the DIV width */<br/> Background: yellow; <br/> border: 1px solid red; <br/>}</style> <br/> </pead> <br/> <body> <br/> <Div id = "divcenter"> <br/> this is a test <br/> </div> <br/> </body> <br/> </ptml>
Type 2: JS + CSS control, not floating (applicable to login pages)
The Code is as follows:
<HTML> <br/> <pead> <br/> <title> Div center demonstration </title> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> function CEN () {<br/> var divname = document. all ("testdiv"); <br/> // The center height equals the height of the page content minus the height of the DIV divided by 2 <br/> var topvalue = (document. body. clientheight-divname. clientheight)/2; <br/> divname. style. margintop = topvalue; <br/>}< br/> // triggered when the page size changes <br/> window. onresize = CEN; <br/> // --> </MCE: SCRIPT> <br/> </pead> </P> <p> <body style = "height: 100%; width: 100%; text-align: center; "onLoad = CEN ()> <br/> <Div id =" testdiv "name =" testdiv "style =" margin: 0 auto; Border: 1px solid red; Height: 400px; width: 400px; "> <br/> Div center demonstration <br/> </body> </P> <p> </ptml>
One of the simplest and most suitableCenter on top, bottom, left, and right, compatible with all browsers
<Div style = "position: absolute; top: 50%; Height: 240px; Border: 1px solid red; margin: 0 auto; margin-top:-120px; width: 300px; left: 50%; margin-left:-150px; "> </div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
