css教程:DIV垂直居中的辦法

2024-07-11 08:37:19

字體：大中小

來源：轉載

供稿：網友

　　經過今天一翻改進，終于找出了解決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布局技巧：未知高度div 垂直居中的問題</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; /* SecondDIV高度的一半 */
float: left;
width: 100%;
height: 50%;
}
.SecondDIV
{
clear: both;
border: silver 1px solid;
background: #666;
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>看看，這不就居中了。呵呵。而且沒有問題哦。www.Webjx.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"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p><title>CSS布局技巧：未知高度div 垂直居中的問題</title></p><p><style type="text/css"></p><p>html,</p><p>body</p><p>{</p><p>height: 100%;</p><p>padding:0;</p><p>margin:0;</p><p>}</p><p>body</p><p>{</p><p>min-height: 200px;</p><p>text-align: center;</p><p>min-width: 402px</p><p>}</p><p>.FirstDIV</p><p>{</p><p>margin-top: -100px; /* SecondDIV高度的一半 */</p><p>float: left;</p><p>width: 100%;</p><p>height: 50%;</p><p>}</p><p>.SecondDIV</p><p>{</p><p>clear: both;</p><p>border: silver 1px solid;</p><p>background: #666;</p><p>margin-left: auto;</p><p>overflow: auto;</p><p>width: 400px;</p><p>margin-right: auto;</p><p>height: 200px;</p><p>text-align: left</p><p>}</p><p></style></p><p></head></p><p><body></p><p><div class="FirstDIV"></div></p><p><div class="SecondDIV"></p><p><p>看看，這不就居中了。呵呵。而且沒有問題哦。www.Webjx.com </p> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342555.html'>serif和sans serif：西方國家的字母體系</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342557.html'>CSS常用屬性縮寫實例</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342556">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342556&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流