让子盒子在父盒子里面水平垂直居中的几种方法 ,

 

 

第一种:

1 .box {

position: relative;

width: 500px;

height: 500px;

border: 1px solid #000;

margin: auto;

}

.box1 {

position: absolute;

width: 100px;

height: 100px;

background-color: pink;

/* 1先让子盒子移动父盒子的一半 left: 50%;*/

/* 2先让子盒子往下移动父盒子的一半 top: 50%; */

left: 50%;

top: 50%;

/* 在让子盒子移动自身高度的一半 采用 margin 负值 */

margin-left: -50px;

/* 在让子盒子移动自身高度的一半 采用 margin 负值 */

margin-top: -50px;

text-align: 100px;

}

第二种:

/* 上下左右全部为0 ,在设置一个margin: auto;*/

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

第三种:

top: 50%;

left: 50%;

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

第四种:

flex布局

align-items: center; justify-content: center;