css实现⼦元素相对⽗元素上下左右居中
在排版布局的过程中，我们不难遇到需要实现这么⼀个要求，我们希望⼦元素相对于⽗元素⽔平和垂直⽅向上都居中。⽔平居中相信⼤家都很熟悉了，只需要设置margin：0 auto就⾏，但垂直居中的话，就不是那么简单了。下⾯我就分享⼀下我所了解的实现这⼀需求的⽅法。⾸先准备两个盒⼦，⼀个parent-box, ⼀个child-box；
第⼀种⽅式，利⽤position与margin结合
<div class="parent-box">
<div class="child-box"></div>
</div>
// 实现样式
<style>
.parent-box{
width: 300px;
height: 300px;
border: red 1px solid;
}
.child-box{
width: 100px;
height: 100px;
border: blue 1px solid;
margin: 0 auto;
position: relative;
top: 50%;
margin-top: -50px;
}
</style>
注：因为设置top值为50%后，⼦元素的顶部在⽗元素的中间位置，所以设置margin-top为负的⼦元素⾼度的⼀半，这样⼦元素就会向上偏移⼦元素⾼度⼀半的距离，使其中⼼点在⽗元素中⼼点的位置，因此这种⽅式的前提条件是知道⼦元素的⾼度。
第⼆种⽅式，利⽤position与transform结合
<div class="parent-box">
<div class="child-box"></div>
</div>
// 实现样式
<style>
.parent-box{
width: 300px;
height: 300px;
border: red 1px solid;
}
.child-box{
width: 100px;
height: 100px;
border: blue 1px solid;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%)
}
</style>
注：同上⼀种⽅式⼀样，设置好top值之后，我们给⼦元素添加transform样式，translateY代表偏移，偏移多少呢？偏移⼦元素⾼度的⼀半，于是给其设置 -50%，注意这⾥的translate偏移设置为百分数之后，它是相对于元素本⾝的宽⾼来计算的。
第三种⽅式，利⽤flex布局
<div class="parent-box">
<div class="child-box"></div>
</div>
// 实现样式
<style>
.parent-box{
width: 300px;
height: 300px;
border: red 1px solid;
display: flex;
justify-content: center;
align-items: center;  //此处设置后，代表该元素下的⼦元素都会垂直居中
}
.child-box{
width: 100px;
css设置文字垂直居中
height: 100px;
border: blue 1px solid;
align-self: center; //在该处设置这个属性，只代表包含此类的⼦元素会垂直居中
}
</style>
注： align-self只针对拥有改类的⼦元素，因此在⽗元素已经设置好align-items: center；居中后，若⼦元素需要的是居中，就不必在写align-self；同样的，只需要有⽤指定类名的元素居中，则⽗元素就没必要写align-items 。
各位好兄弟，如果这篇⽂章对你有帮助，帮忙点个赞呗

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。