1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 width:800px; 9 height:200px; 10 border:10px red solid; 11 12 } 13 .inner{ 14 width:200px; 15 height:180px; 16 background:orange; 17 margin-left:auto; 18 margin-right:auto; 19 border:10px yellow solid; 20 } 21 /* 22 元素的水平方向的布局： 23 -元素在其父元素中的水平方向的位置由以下几个属性共同决定： 24 -margin-left 25 -border-left 26 -padding-left 27 -width 28 -padding-right 29 -border-right 30 -margin-right 31 一个元素在其父元素中，水平布局必须满足以下等式 32 margin-left+border-left+padding-left+width+padding-righ t+border-right+margin-right = 其父元素的内容区的宽度 33 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 34 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束> ，则等式会自动调整 35 -调整的情况： 36 -如果这七个值中没有auto的情况，则浏览器会自动调节margin -right值以使等式成立 37 这七个值中有三个值可设置为auto: 38 -width 39 -margin-left 40 -maring-right 41 -如果某个值为auto，则会自动调整auto那个值以使等式成立 42 -如果将一个宽度和一个外边距设置为auto，则宽度会调整到最 大 43 -如果将三个值都设置为auto，则外边距都是0，宽度最大(撑满 整个父元素) 44 -如果将两个外边距设置为auto宽度固定值，则子元素在父元素 中水平居中 45 46 47 48 */ 49 50 51 </style> 52 </head> 53 <body> 54 <div class="outer"> 55 <div class="inner"></div> 56 </div> 57 </body> 58 </html>