文章目录
一、DIV左右居中
#center{ background:url(images/zy_01.gif) center top no-repeat; height:470px; width:800px; margin:0 auto; }/*居中*/
二、几种常见的DIV边框样式
border: solid 3px blue;
width: 450px;
height: 150px;
overflow: scroll;
scrollbar-face-color: #ffd700;
<html> <head> <title>边框样式</title> </head> <body> <p style=border-style:none>无边框</p> <p style=border-style:dotted>点线式边框</p> <p style=border-style:dashed>破折线式边框</p> <p style=border-style:solid>直线式边框</p> <p style=border-style:double>双线式边框</p> <p style=border-style:groove>槽线式边框</p> <p style=border-style:ridge>脊线式边框</p> <p style=border-style:inset>内嵌效果的边框</p> <p style=border-style:outset>突起效果的边框</p> </body> </html>
三、两种方式让DIV上下左右都居中
第一种：全CSS控制，层漂浮（适用于做登陆页面）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
<head>
<title>居中Demo</title>
</head>
<mce:style type="text/css" title="currentStyle" media="screen"><!--
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}
--></mce:style><style type="text/css" title="currentStyle" media="screen" mce_bogus="1">#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}</style>
</head>
<body>
<div id="divcenter">
this is a test
</div>
</body>
</html>
第二种：JS + CSS控制，不漂浮（适用于做登陆页面）
<html>
<head>
<title>DIV居中演示</title>
<mce:script type="text/javascript"><!--
function cen(){
var divname = document.all("testdiv");
//居中高度等于页面内容高度减去DIV的高度 除以2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
//页面大小发生变化时触发
window.onresize = cen;
// --></mce:script>
</head>
<body style="height:100%; width:100%; text-align:center;" onload=cen()>
<div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV居中演示
</body>
</html>
第三种：不浮动DIV的情况下居中
<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>
四、DIV内的内容居中设置
text-align用于居中，是不标准的用法。
《The Zen of CSS Design》中提到了四种CSS居中方法，仅供参考:
div{
margin-left:auto;
margin-right:auto;
width:100px;
}
-----------------------------
/*原意用于字体的,故是一种Hack*/
body{
text-align:center;
}
p{
text-align:left;
}
-----------------------------
body{
text-align:center;
}
#container{
margin-left:auto;
margin-right:auto;
width:100px;
text-align:left;
}
-----------------------------
/*兼容性最广*/
#container{
position:absolute;
left:50%;
width:100px;
margin-left:-50px;
}
上下内容调整：padding-top:100px;
五、防止DIV被内容超出容器
/*提供的代码片段： */
div { height:25px; line-height:25px; overflow:hidden; }
/* 这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。*/
六、防止DIV被内容超出容器
<div id="logincopyright" style="position: fixed;display:none"><font color:#FFFFFF style="color: #FFFFFF">
七、Div内容底部
<div style=" margin-top:40px;" id="bottom">
八、