关于拔河效应

你好，看下面代码：

1. 如果外层div，内层一个div，都设置宽度时，直接写margin：auto，就可以水平居中。

html代码：

<div id="div1">  
         <div class="div2">祝学习愉快</div>  
 </div>

css代码：

  #div1{
        width:100%;
        height:300px;
        border:1px blue solid;
   }
  .div2{
        width: 100px;
        height:100px;
        margin:auto;
   }

2. 当定位后，看下面代码：

html代码：

<div id="div1">  
         <div class="div2">祝学习愉快</div>  
 </div>

css代码：

  #div1{
        width:100%;
        height:300px;
        border:1px blue solid;
        position:relative;
    }
    .div2{
          position:absolute;
          width: 100px;
          height:100px;          
          border:1px red solid;
          left:0;
          right:0;
          margin:auto;
          }

这样也是水平居中，因为代码.div2针对#div1定位，当设置left:0; right:0、margin:auto;,  左右自动计算，所以出现拔河现象，同理top:0, bottom:0 ,margin:auto; 一样，出现上下拔河。

希望对你有帮助，祝学习愉快，欢迎采纳。