1、 父盒子相对定位,子盒子绝对定位,子盒子的top值为父盒子的高度减去子盒子的高度然后除以2得到了top值,子盒子的left值为父盒子的宽度减去子盒子的宽度然后除以2得到了left值
<div class="box">
<div class="ky"></div>
</div>
<style>
.box{
width: 750px;
height: 750px;
background-color: red;
position: relative;//父盒子相对定位
}
.ky{
width: 100px;
height: 100px;
background-color:black;
position: absolute;//子盒子绝对定位
top: 325px; //子盒子的top值为父盒子的高度减去子盒子的高度然后除以2得到了top值
left: 325px;//子盒子的left值为父盒子的宽度减去子盒子的宽度然后除以2得到了left值
}
</style>
2、父盒子设置弹性盒子,在x轴方向居中,在y方向居中
<template>
<div>
<div class="box">
<div class="ky"></div>
</div>
</div>
</template>
<style scoped>
.box {
width: 500px;
height: 500px;
background-color: red;
display: flex;//父盒子设置弹性盒子
justify-content: center;//在x轴方向居中
align-items: center;//在y方向居中
}
.ky {
width: 100px;
height: 100px;
background-color: black;
}
</style>
3、父盒子相对定位,子盒子绝对定位,top值为0,left值为0,top值为0,botton为0,子盒子设置margin:auto属性。
<template>
<div>
<div class="box">
<div class="ky"></div>
</div>
</div>
</template>
<style scoped>
.box {
width: 500px;
height: 500px;
background-color: red;
position: relative;//父盒子相对定位,
}
.ky {
width: 100px;
height: 100px;
background-color: black;
position: absolute;//子盒子绝对定位
top: 0;//top值为0,left值为0,top值为0,botton为0
left: 0;
right: 0;
bottom: 0;
margin:auto;//子盒子设置margin:auto属性。
}
</style>
4、父盒子设置弹性盒子,在y方向居中,子盒子设置margin: 0 auto。
<template>
<div>
<div class="box">
<div class="ky"></div>
</div>
</div>
</template>
<style scoped>
.box {
width: 500px;
height: 500px;
background-color: red;
display: flex;
align-items: center;
}
.ky {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: black;
}
</style>