Javascript 如何将上一个和下一个按钮正确定位在flexbox转盘的中间？

我试图在垂直中间和两端添加prev和next。如果容器div高度为100px，将

prev

放在中间的唯一方法似乎是给出

margin top:50px

。但容器高度可能会有所不同，所以硬编码是没有意义的。另外，由于有一个水平滚动条，我无法将

next

放置在另一端的右侧

：：-webkit滚动条{
显示：无；
}
.滚动包装器flexbox{
显示器：flex；
显示：flex内联；
柔性包装：nowrap；
溢出-x：自动；
-ms溢出样式：无；
：：ng deep.卡片{
flex:0自动；
右边距：3倍；
}
}
：：ng deep.卡片{
边界半径：10px；
边框：2倍纯色灰色；
宽度：150px；
身高：100%；
背景：白色；
文本对齐：居中；
垫面：3件；
}
.滚动包装器flexbox{
身高：100%；
边缘底部：20px；
宽度：50%；
弹性：0.50%；
-webkit溢出滚动：触摸；
：-webkit滚动条{
显示：无；
}
}

JS-Bin
上
下一个

再添加一个flex容器，添加prev按钮、content和next按钮，并将align items居中，使其垂直居中

：：-webkit滚动条{
显示：无；
}
.柔性容器{
显示器：flex；
对齐项目：居中；
}
.滚动包装器flexbox{
显示器：flex；
显示：flex内联；
柔性包装：nowrap；
溢出-x：自动；
-ms溢出样式：无；
：：ng deep.卡片{
flex:0自动；
右边距：3倍；
}
}
：：ng deep.卡片{
边界半径：10px；
边框：2倍纯色灰色；
宽度：150px；
身高：100%；
背景：白色；
文本对齐：居中；
垫面：3件；
}
.滚动包装器flexbox{
身高：100%；
边缘底部：20px；
宽度：50%；
弹性：0.50%；
-webkit溢出滚动：触摸；
：-webkit滚动条{
显示：无；
}
}

JS-Bin
上
下一个

是的！正是我想要的。非常感谢！：）