第十七课程 div css当中的 DIV块状居中参数设置详细教程详解
本帖最后由 asp老师 于 2014-12-4 21:58 编辑首先我们新建一个17.html的文件和17.css同时把17.css文件引入我们17.html当中；
17.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>无标题文档</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="aaa">111</div>
</body>
</html>
17.css代码如下；
.aaa{background:#F00; width:960px; height:450px;}那么此时效果如下；
此时我们可以看到，现在的效果是这样的，但是我们会发现此时的会有一个蓝色的左面和上面都有个边距，(默认的是浏览器有8个px的大小边距的)那么我们通常可以这么来设置来取消这个边距白色的问题，因为我们正常的一个网页应该是没有这个的，所以我们可以在17.css当中加一个这样的css代码；如下
<font color="#ff0000">body{margin:0px; padding:0px;}</font>效这样呢，我们去取消了8个px的大小效果如下：
那么我们如何操作，才可以让这个div居中呢，我们可以用到这个代码
<font size="5"> margin:0px auto;</font>我们来分析下这个代码这个就是让这个div上下的边距为0px 左右2面自动处理，效果如下;
那么这样左右就可以自动调整了，margin:0px atuo; (这样的方法是比较好的，因为我们每个电脑的显示器分别率是不一样的，如果是我们给左右2个margin更具自己设定了一个数值的话，那么可能在不同的分辨率会出现错乱的页面效果，)
此时我们在17.html当中继续添加一个div 代码如下：
<body>
<div class="aaa">
<div class="ccc">12</div>
</div>
</body>css代码如下：
body{margin:0px; padding:0px;}
.aaa{background:#F00; width:960px; height:450px; margin:0px auto; }
.ccc{background:#FF0; width:860px; height:150px; margin:0px auto;}我们来分析这个代码：他也是让这个.ccc的div 居中；那么此时的效果如下
margin:50px 250px 10px 20px; 这样呢，就表示的数值是上右下左如果是margin:10px 30px; 就表示上下 左右的数值
那么如果想要让我们的.ccc黄色的div为垂直居中的话，我们应该怎么办呢?可以设置它的边距margin的数值，当然也可以设置外面大的div的内边距的数值padding
那么我们可以回忆总结下知识点；
如果我们想要让一个div居中的话-那么就要考虑到2个因素一个是水平居中和一个是垂直居中；当然不管是什么定位，我们只要设置它或者是包含这个div的margin和padding的数值就可以了；
页:
[1]