css的盒子的居中

1）标准流下的居中显示
给盒子设置外边距
margin:0 auto;
2)脱离标准流的就不能用上面那种方式
先让它向右走父盒子的一半，在向左走自己的一半

      .one{

        height: 300px;
        width: 577px;
        border: 1px solid black;
        position: relative;
        margin: 0 auto;
    }
    .two{
        width: 100px;
        height: 100px;
        border: 1px solid green;
        position: absolute;
        margin: 0 auto;
    }   
  </style>
   </head>
  <body>
    <div class="one">
        <div class="two">   
        </div>
    </div>

这种情况下子盒子不居中，父盒子居中

例子：

 .two{

        width: 100px;
        height: 100px;
        border: 1px solid green;
        position: absolute;
        left: 50%;        父盒子的一半
        margin-left: -50px;子盒子向左走自己的一半width: 100px/2
    }

3）下面的情况相当于margin: 0 auto;

      margin-left: auto;    先跑到最右边

        margin-right: auto;       跑到中间

最后编辑于：2017.12.04 02:55:13

css的盒子的居中

推荐阅读更多精彩内容