第一种方法
通过css的margin属性
div2{
margin-left: (div1.width - div2.width) / 2 + 'px';
margin-top: (div1.height - div2.height) / 2 + 'px';
}
第二种方法
通过css的position属性
div1 {
position: relative;
}
div2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(div2.width / 2) + 'px';
margin-top: -(div2.height / 2) + 'px';
}
第三种方法
通过css的子绝父相规则
.div1{
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
}
.div2{
width: 30px;
height: 30px;
border: 1px solid #000;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
第四种方法
通过弹性布局
.div1{
display: flex;
justify-content: center;
align-items: center;
}
第五种方法
通过固定定位,给父子元素都给一个固定定位,
.div1{
width: 100px;
height: 100px;
border: 1px solid #000;
position: fixed;
}
.div2{
position: fixed;
width: 30px;
height: 30px;
border: 1px solid #000;
margin: 35px 35px;
}
第六种方法
通过平移translate属性
.div1{
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
}
.div2{
width: 20px;
height: 20px;
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}