[Document of the institute of fire website construction] Today, the website has been improved and finally found a solution to vertical center DIV.
<! 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; charset = UTF-8"/> <Title> CSS layout skills: vertical center of div with unknown height-fire jianting college </title> <Style type = "text/css"> Html, body { Height: 100%; Padding: 0; Margin: 0; } Body { Min-height: 200px; Text-align: center; Min-width: 402px } . FirstDIV { Margin-top:-100px;/* Half of SecondDIV height */ Float: left; Width: 100%; Height: 50%; } . SecondDIV { Clear: both; Border: silver 1px solid; Background: # ccc; Margin-left: auto; Overflow: auto; Width: 400px; Margin-right: auto; Height: 200px; Text-align: left } </Style> </Head> <Body> <Div class = "FirstDIV"> </div> <Div class = "SecondDIV"> <P> look, this is not centered. Haha. And there is no problem. Www.bkjia.com </p> <P> body {background-color: # FFF5F0} <br> Div {position: absolute; top: 50%; left: 50%; margin:-100px 0 0-200px; Width: 400px; height: 200px; border: 1px # CCCC00 solid; font-family: Arial, Helvetica, sans-serif; color: #666666} </p> </Div> </Body> </Html>
|
<! 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; charset = UTF-8 "/> <title> CSS layout skills: unknown height div vertical center problem-fire station building school </title> <style type = "text/css"> html, body {height: 100%; padding: 0; margin: 0 ;}body {min-height: 200px; text-align: center; min-width: 402px }. firstDIV {margin-top:-100px;/* Half of SecondDIV height */float: left; width: 100%; height: 50% ;}. secondDIV {clear: both; border: silver 1px solid; background: # ccc; Margin-left: auto; overflow: auto; width: 400px; margin-right: auto; height: 200px; text-align: left }</style>
Run code
Copy code
Save code
Add to favorites