关于解决水平并垂直居中一个div的几个方法

1、使用定位方法，根据子绝夫相（子元素绝对定位，父元素相对定位）

<div class="box">

  <div class="small">

  </div>

</div>

<style>

.box{

width:300px;

height:300px;

border:1px solid red;

position:relative;/* 相对定位*/

}

.small{

width:100px;

height:100px;

background-color: blueviolet;

left:0;

right:0;

bottom:0;

top:0;

margin:auto;

position: absolute;

}

 

</style>

2、也是使用定位方法，让小div left:50% right:50%;然后分别向左向上平移自身的50%；

.box{

width:300px;

height:300px;

border:1px solid red;

position:relative;/* 相对定位*/

}

.small{

width:100px;

height:100px;

backgrund-color:red;

left:50%;

top:50%;

margin-left:-50px;

margin-top:-50px;

position:absolute

}

3、使用定位＋平移的方法 让小div left:50% right:50%，然后transform:translate(-50%，-50px)；

.box{

width:300px;

height:300px;

border:1px solid red;

position:relative;/* 相对定位*/

}

.small{

width:100px;

height:100px;

backgrund-color:red;

left:50%;

top:50%;

transform:tranlate(-50px,-50px)

}

4,使用flex弹性盒子。

.box{

width:300px;

height:300px;

border:1px solid red;

display:flex;

justify-content:center;

align-items:center;

}

.small{

width:100px;

height:100px;

backgrund-color:red;

}

使用网格布局

 .small{

            width: 100px;

            height: 100px;

            grid-area:a;

            background-color: blueviolet;

  

        }

        .box{

            width: 300px;

            height: 300px;

            border:1px solid red;

            display: grid;

            grid-template-rows: 100px 100px 100px;

            grid-template-columns: 100px 100px 100px;

             grid-template-areas: ". . . " ". a ." ". . .";;

        }

     

4,使用flex弹性盒子。

.box{

width:300px;

height:300px;

border:1px solid red;

display:flex;

}

.small{

width:100px;

height:100px;

backgrund-color:red;

justify-content:center;

align-items:center;

}

.