关于margin-left(right):auto;DIV不居中的一个问题，新手求教。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于margin-left(right):auto;DIV不居中的一个问题，新手求教。相关的知识，希望对你有一定的参考价值。
想在DIV1中添加一个DIV2，让DIV1相对于浏览器水平居中，DIV2相对于DIV1水平居中，相对于DIV1的上边界距离250px。代码如下：
<!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>
<link type="text/css" href="CSS/css2.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="DIV1">
<div id="DIV2"></div>
</div>
</body>
</html>
CSS代码：
#DIV1
background-color:#ff0000;
width:500px;
height:500px;
margin-left:auto;
margin-right:auto;
#DIV2
width:300px;
height:40px;
background-color:#444444;
margin-left:auto;
margin-right:auto;
margin-top:250px;
float:left;
现在遇到的问题是，如果不设置float:left;的话IE6中效果正常，但chrome中DIV1和DIV2的上边界都距离浏览器的上边界为250px。
如果设置float:left;的话IE6和chrome效果一样，都是距离浏览器上边界250px，但水平无法居中。
1、请教一下，是哪里出问题了？
2、如果将#DIV2中的margin-right:auto;删掉，改成margin-left:100px;在chrome浏览器中效果正常，但在IE6中，偏移的明显不是100px，请教一下这个又是为什么。
<!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>
</head>
<style type="text/css">
bodyfont-family:宋体;font-size:12px;
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,span,em,p,inputmargin:0;padding:0px;
/*第一种方式*/
#D1 width:500px;height:250px;margin:0 auto;background-color:#ff0000;padding-top:250px
#D2 width:300px;height:40px;background-color:#444444;margin:0 auto
/*第二种方式*/
#D3 width:500px;height:500px;margin:0 auto;background-color:#000;overflow:hidden
#D4 width:300px;height:40px;background-color:#fff;margin:0 auto;margin-top:250px;
/*关于浮动下margin-left;margin-right的问题*/
#D5 width:500px;height:500px;margin:0 auto;background-color:#ff0;
#D6 width:300px;height:40px;background-color:blue;float:left;margin-left:50px;_margin-left:25px
/*ie6下DIV浮动后margin-left/right双倍距离的BUG，这个算是一个经典BUG了，
所以我针对IE6写了一个_margin-left:25px;
*/
</style>
<body>
<!--第一种-->
<div id="D1">
<div id="D2"></div>
</div>
<!--第二种-->
<div id="D3">
<div id="D4"></div>
</div>
<!--浮动margin-->
<div id="D5">
<div id="D6"></div>
</div>
</body>
</html>追问
/*第一种方式*/
#D1 width:500px;height:250px;margin:0 auto;background-color:#ff0000;padding-top:250px;
#D2 width:300px;height:40px;background-color:#444444;margin:0 auto
给D1增加了padding-top:250px;后，在浏览器中，D1距离浏览器下边框就多出一段空白来，高度是250px。请问为什么
padding和margin是什么意思你现在清楚的吗？
参考技术B <body><div id="DIV1">
这里随便输入几个字就可以了，不信你试一下
<div id="DIV2"></div>
</div>
</body> 参考技术C 因为子块的MARGIN属性会对父块产生影响。我改动了一下，源码如下；
<!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>
<STYLE>
#DIV1
background-color:#ff0000;
width:500px;
height:500px;
margin:0 auto;
#DIV2
width:300px;
height:40px;
background-color:#444444;
margin-left:auto;
margin-right:auto;
position:relative;
top:250px;
left:0;
</STYLE>
</head>
<body>
<div id="DIV1">
<div id="DIV2"></div>
</div>
</body>
</html> 参考技术D IE6中有双边距的bug
比如<div class="box1"></div><div class="box2"></div>
box1和box2同时浮动的时候 你给他外边距的话 他在IE6里就会出现双倍的边距 margin-left:10px;
现在你给10像素的左边距 在IE里面里 box1和box2的距离 就有20像素 你可以试试
解决的办法就是 给box2一个属性 display:inline; 这样就可以解决了！~
水平方向margin：auto
先上图
??由图可看到，块级元素的水平方向上又“7大属性”：margin-left、border-left、padding-left、margin-left、width、padding-right、border-right和margin-right。这些属性中，只有3个属性可以设置为auto，分别为：margin-left、width和margin-right。
在讨论之前，首先记住两条原则：
??1）这7大属性的值总和=父元素的width；
??2）属性间冲突时，优先级：width>margin-left>margin-right。
元素的属性width和margin的不同组合情况分如下4种情况：
| (1) | (2) | (3) | (4) | |
|---|---|---|---|---|
| width | 定值 | 定值 | auto | auto |
| margin | 定值 | auto | 定值 | auto |
（1）width= 定值，margin=定值
??此种情况即为width、margin-left、margin-right均为定值，为过分受限，根据原则2，此时总会把margin-right强制为auto。
??也就是说，为了达到原则1，margin-right会根据情况调整，使元素的总宽度等于其包含快的width。
（2）width= 定值，margin=auto
??* width= 定值，margin-left = mergin-right = auto，此时margin-left与margin-right会设置为相等的长度，因此元素会在父元素中居中
??* width= 定值，margin-left和mergin-right中一个为定值、一个为auto，则为auto的属性根据原则1，自动调整。
（3）width= auto，margin=定值
??* marin-left + margin-right < 父元素宽度，则width根据原则1设置为某个值
??* marin-left + margin-right >= 父元素宽度，则width为0
（4）width= auto，margin=auto
??* width、margin-left、mergin-right均为auto，这就是默认的情况，此时两个外边距会设置为0，width会尽可能宽以达到原则1。
??* width = auto，margin-left和mergin-right中一个为定值、一个为auto，此时，根据原则2，width为占用剩下的所有宽度，为auto的margin的值为0。
以上是针对块级元素，对于非块级元素（内联元素和替换元素）：
??* 只要设置为display:block，除了元素的宽度为内容的固有宽度这一点，其他表现与块级元素表现一致。
??* 如果不设置display:block， 则width为内容的固有宽度，水平方向margin可以设定为固定值，但设置为auto会表现为0；
以上是关于关于margin-left(right):auto;DIV不居中的一个问题，新手求教。的主要内容，如果未能解决你的问题，请参考以下文章