各种盒子居中

第一种:margin:0 auto;

 

 

 .main{

        width: 300px;

        height: 300px;

        margin: 300px auto;

        background-color: red;

 

    }

    <div class="main"></div>

/* 使用:margin:0 auto;的前提就是盒子必须就是有宽度的 */

 

 

第二种  position

 .box{

        width: 100px;

        height: 100px;

        position: absolute;

        left: 50%;

        margin-left: 50px;

 background-color: red;

    }

 

 <div class="box"></div>

 

第三种 弹性布局

 .item{

        width: 800px;

        height: 800px;

        background-color: red;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .items{

        width: 100px;

        height: 100px;

        background-color:green;

    }

 

 

<div class="item">

        <div class="items">

 

        </div>

    </div>

 

第四种平移居中

 .box{

        width: 300px;

        height: 300px;

        background-color: yellow;

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%,-50%);

    }

 

<div class="box"></div>