一个div在另外一个div里面水平垂直居中

垂直居中

本案例使用的是动画中的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()方法移动子盒子宽和高的一半，这样子盒子就到中间来了