Html 将旋转圆置于页面中心

我想把这些环放在页面中心。 同心圆似乎在移动，而不是固定在同一个中心。 我不明白中心是否在移动。 我想把它固定在页面中央。 我不明白半径是否在变化。 可能它们只是固定在一个中心，然后平移一些像素

*{
框大小：边框框；
}
html{
字体大小：100%；
}
.轨道{
/*背景#090c29*/
浮动：左；
宽度：100%；
最小宽度：100vw；
最小高度：100vh；
}
.轨道图标{
宽度：2米；
高度：2米；
线高：2米；
字体大小：0.1em；
边界半径：100%；
/*背景：#ccc；
颜色：#fff*/
文本对齐：居中；
显示：块；
}
.轨道包裹{
高度：50em；
列表样式：无；
字号：2em；
}
.轨道包裹>李{
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
/*.orbit wrap>li:悬停ul{
边框宽度：2倍；
边框颜色：#fff；
}
.orbit wrap>li:悬停~li ul{
边框颜色：rgba（255、255、255、0.2）；
}
.orbit wrap>li:悬停~li ul li{
不透明度：0.4；
}
ul[类别^=环]{
过渡：所有300毫秒的缓进缓出；
}
ul[class^=ring]li{
过渡：所有300毫秒的缓进缓出；
}*/
.ring-00{
宽度：40em；
高度：40公分；
-webkit动画：逆时针旋转35s线性无限；
动画：逆时针旋转35s线性无限；
}
.ring-00 i{
-webkit动画：逆时针旋转35s线性无限；
动画：逆时针旋转35s线性无限；
}
.ring-00>*：第n个类型（1）{
-webkit变换：旋转（30度）平移（25 em）旋转（-30度）；
变换：旋转（30度）平移（25米）旋转（-30度）；
}
.ring-00>*：第n个类型（2）{
-webkit变换：旋转（60度）平移（25 em）旋转（-60度）；
变换：旋转（60度）平移（25米）旋转（-60度）；
}
.ring-00>*：第n个类型（3）{
-webkit变换：旋转（90度）平移（25em）旋转（-90度）；
变换：旋转（90度）平移（25米）旋转（-90度）；
}
.ring-00>*：第n个类型（4）{
-webkit变换：旋转（120度）平移（25em）旋转（-120度）；
变换：旋转（120度）平移（25米）旋转（-120度）；
}
.ring-00>*：第n个类型（5）{
-webkit变换：旋转（150度）平移（25 em）旋转（-150度）；
变换：旋转（150度）平移（25米）旋转（-150度）；
}
.ring-00>*：第n个类型（6）{
-webkit变换：旋转（180度）平移（25 em）旋转（-180度）；
变换：旋转（180度）平移（25米）旋转（-180度）；
}
.ring-00>*：第n个类型（7）{
-webkit变换：旋转（210度）平移（25 em）旋转（-210度）；
变换：旋转（210度）平移（25米）旋转（-210度）；
}
.ring-00>*：第n个类型（8）{
-webkit变换：旋转（240度）平移（25em）旋转（-240度）；
变换：旋转（240度）平移（25米）旋转（-240度）；
}
.ring-00>*：第n个类型（9）{
-webkit变换：旋转（270度）平移（25em）旋转（-270度）；
变换：旋转（270度）平移（25em）旋转（-270度）；
}
.ring-00>*：第n个类型（10）{
-webkit变换：旋转（300度）平移（25em）旋转（-300度）；
变换：旋转（300度）平移（25米）旋转（-300度）；
}
.ring-00>*：第n个类型（11）{
-webkit变换：旋转（330度）平移（25em）旋转（-330度）；
变换：旋转（330度）平移（25em）旋转（-330度）；
}
.ring-00>*：第n个类型（12）{
-webkit变换：旋转（360度）平移（25em）旋转（-360度）；
变换：旋转（360度）平移（25em）旋转（-360度）；
}
.ring-0{
宽度：30em；
高度：30公分；
-webkit动画：顺时针旋转35秒线性无限；
动画：顺时针旋转35秒线性无限；
}
.ring-0 i{
-webkit动画：逆时针旋转35s线性无限；
动画：逆时针旋转35s线性无限；
}
.ring-0>*：第n个类型（1）{
-webkit变换：旋转（30度）平移（20em）旋转（-30度）；
变换：旋转（30度）平移（20em）旋转（-30度）；
}
.ring-0>*：第n个类型（2）{
-webkit变换：旋转（60度）平移（20em）旋转（-60度）；
变换：旋转（60度）平移（20米）旋转（-60度）；
}
.ring-0>*：第n个类型（3）{
-webkit变换：旋转（90度）平移（20em）旋转（-90度）；
变换：旋转（90度）平移（20em）旋转（-90度）；
}
.ring-0>*：第n个类型（4）{
-webkit变换：旋转（120度）平移（20em）旋转（-120度）；
变换：旋转（120度）平移（20em）旋转（-120度）；
}
.ring-0>*：第n个类型（5）{
-webkit变换：旋转（150度）平移（20em）旋转（-150度）；
变换：旋转（150度）平移（20em）旋转（-150度）；
}
.ring-0>*：第n个类型（6）{
-webkit变换：旋转（180度）平移（20em）旋转（-180度）；
变换：旋转（180度）平移（20em）旋转（-180度）；
}
.ring-0>*：第n个类型（7）{
-webkit变换：旋转（210度）平移（20em）旋转（-210度）；
变换：旋转（210度）平移（20em）旋转（-210度）；
}
.ring-0>*：第n个类型（8）{
-webkit变换：旋转（240度）平移（20em）旋转（-240度）；
变换：旋转（240度）平移（20em）旋转（-240度）；
}
.ring-0>*：第n个类型（9）{
-webkit变换：旋转（270度）平移（20em）旋转（-270度）；
变换：旋转（270度）平移（20em）旋转（-270度）；
}
.ring-0>*：第n个类型（10）{
-webkit变换：旋转（300度）平移（20em）旋转（-300度）；
变换：旋转（300度）平移（20em）旋转（-300度）；
}
.ring-0>*：第n个类型（11）{
-webkit变换：旋转（330度）平移（20em）旋转（-330度）；
变换：旋转（330度）平移（20em）旋转（-330度）；
}
.ring-0>*：第n个类型（12）{
-webkit变换：旋转（360度）平移（20em）旋转（-360度）；
变换：旋转（360度）平移（20em）旋转（-360度）；
}
.环-1{
宽度：20em；
高度：20em；
-webkit动画：逆时针旋转30秒线性无限；
动画：逆时针旋转30秒线性无限；
}
.环-1 i{
-webkit动画：逆时针旋转30秒线性无限；
动画：逆时针旋转30秒线性无限；