Html之【DIV】综合技巧大全（持续更新中...）

最新推荐文章于 2022-04-25 11:47:24 发布

原创最新推荐文章于 2022-04-25 11:47:24 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #border #url

5.【css】同时被 2 个专栏收录

85 篇文章

订阅专栏

4.【html】

83 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现DIV的左右居中、常见边框样式、上下左右居中方法、内容居中设置及防止内容超出容器的技术，并提供了实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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内容底部

八、