垂直居中
本案例使用的是动画中的transform属性做的:
效果如下:
可以看到:小圆在大圆里面垂直居中
css部分
.box {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
border-radius: 50%;
background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}
.inner {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
transform: translate(-50%,-50%);
border-radius: 50%;
}
body部分
<div class="box">
<div class="inner"></div>
</div>
思路是这样的:
①首先是利用定位:子绝父相
②然后将子盒子的left和top均设置为50%,因为定位的原点是在左上角,所有现在的位置是偏右下的
③利用transform的translate()方法移动子盒子宽和高的一半,这样子盒子就到中间来了