Html 将旋转木马垂直居中放置在一个部分内

我有一个非常基本的Flickity旋转木马，里面有一些图片。我的问题是它在页面的顶部，我想在我的部分内垂直居中整个旋转木马。我的部分高度等于我的设备的高度，所以它基本上是全屏的。我尝试了很多事情，但我不知道如何解决它。我尝试应用

display:flex和
对齐项目：居中欺骗我的部分，但它破坏了整个旋转木马

我的代码：


**style.css**```
/*外部css:flickity.css*/
* {
框大小：边框框；
}
身体{
字体系列：无衬线；
}
#b节{
填充：0px；
边际：0px；
背景#0b1320；
文本对齐：居中；
颜色：白色；
最小高度：100vh；
}
旋转木马{
背景#0b1320；
}
.传送带单元{
宽度：70%；
高度：200px；
/*flex box，在单元格中居中显示图像*/
显示：-网络工具包盒；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
证明内容：中心；
-webkit对齐项目：居中；
对齐项目：居中；
}
.传送带单元img{
显示：块；
最大宽度：100%；
最大高度：100%；
/*暗淡的未选中*/
不透明度：0.7；
-webkit变换：比例（0.85）；
变换：比例（0.85）；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
-webkit转换：不透明度0.3s，-webkit转换0.3s，转换0.3s，-webkit过滤器0.3s，过滤器0.3s；
过渡：不透明度0.3s，变换0.3s，过滤0.3s；
}
/*使选定图像变亮*/
.carousel-cell.is-selected img{
不透明度：1；
-webkit转换：规模（1）；
变换：比例（1）；
-webkit过滤器：无；
过滤器：无；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.传送带单元{
高度：400px；
}
}
@媒体屏幕和屏幕（最小宽度：960像素）{
.传送带单元{
宽度：60%；
}
}
/*按钮，没有圆圈*/
.flickity上一步按钮{
宽度：60px；
高度：60px；
背景：透明；
不透明度：0.6；
}
.flickity上一步按钮：悬停{
背景：透明；
不透明度：1；
}
/*箭头颜色*/
.flickity上一步按钮.箭头{
填充物：白色；
}
.flickity-prev-next-button.no-svg{
颜色：白色；
}
/*靠近边缘*/
.flickity-prev-next-button.previous{
左：0；
}
.flickity-prev-next-button.next{
右：0；
}
/*隐藏禁用按钮*/
.flickity上一步按钮：禁用{
显示：无；
}

文件
您的
部分
块已正确对齐，而
div.carousel
未正确对齐

我已经解决了这个问题，使用了额外的包装器元素--
div.center-wrap
。
样式也发生了变化：

.carousel{
背景#0b1320；
宽度：100%；
}
分中心包线{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}

完整代码段：


**style.css**```
/*外部css:flickity.css*/
* {
框大小：边框框；
}
身体{
字体系列：无衬线；
}
#b节{
填充：0px；
边际：0px；
背景#0b1320；
文本对齐：居中；
颜色：白色；
最小高度：100vh；
}
旋转木马{
背景#0b1320；
宽度：100%；
}
分中心包线{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
.传送带单元{
宽度：70%；
高度：200px；
/*flex box，在单元格中居中显示图像*/
显示：-网络工具包盒；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
证明内容：中心；
-webkit对齐项目：居中；
对齐项目：居中；
}
.传送带单元img{
显示：块；
最大宽度：100%；
最大高度：100%；
/*暗淡的未选中*/
不透明度：0.7；
-webkit变换：比例（0.85）；
变换：比例（0.85）；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
-webkit转换：不透明度0.3s，-webkit转换0.3s，转换0.3s，-webkit过滤器0.3s，过滤器0.3s；
过渡：不透明度0.3s，变换0.3s，过滤0.3s；
}
/*使选定图像变亮*/
.carousel-cell.is-selected img{
不透明度：1；
-webkit转换：规模（1）；
变换：比例（1）；
-webkit过滤器：无；
过滤器：无；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.传送带单元{
高度：400px；
}
}
@媒体屏幕和屏幕（最小宽度：960像素）{
.传送带单元{
宽度：60%；
}
}
/*按钮，没有圆圈*/
.flickity上一步按钮{
宽度：60px；
高度：60px；
背景：透明；
不透明度：0.6；
}
.flickity上一步按钮：悬停{
背景：透明；
不透明度：1；
}
/*箭头颜色*/
.flickity上一步按钮.箭头{
填充物：白色；
}
.flickity-prev-next-button.no-svg{
颜色：白色；
}
/*靠近边缘*/
.flickity-prev-next-button.previous{
左：0；
}
.flickity-prev-next-button.next{
右：0；
}
/*隐藏禁用按钮*/
.flickity上一步按钮：禁用{
显示：无；
}

文件
非常感谢！