Javascript 在具有动态宽度的容器中居中页脚

我将可调整大小的拆分视图与

我有一个非常基本的设置，有两个窗格

如何在右窗格中居中显示底部页脚

由于页脚的宽度是动态的，所以调整窗格大小后页脚不能正确居中

我已经尝试了所有可能的定位——绝对定位、固定定位、粘性定位、相对定位，但似乎没有任何效果

---

JSFiddle

Split（['.Split left'，'.Split right']{
排水沟尺寸：10，
尺寸：[33,67]//单位为%
})

正文{
保证金：0；
高度：100vh；
溢出：隐藏；
}
.内容{
宽度：100%；
身高：100%；
显示器：flex；
证明项目：中心；
对齐项目：居中；
}
.分开{
宽度：100%；
身高：100%；
边框：0px实心；
溢出：隐藏；
}
.向左分路{
背景色：rgb（250250）；
填充：20px；
填充顶部：0px；
溢出x：隐藏；
溢出y：自动；
填充底部：60px；
}
.向右分{
背景色：rgb（253）；
背景色：白色；
填充顶部：0px；
右边填充：50px；
左侧填充：50px；
文本对齐：居中；
溢出x：隐藏；
溢出y：隐藏；
}
.排水沟{
光标：col resize！重要；
身高：100%；
背景：ddd；
}
.footer{
位置：固定；
底部：0；
宽度：60%；
背景：rgba（255,0,0,0.2）；
填充：10px；
}

页脚

您可以使用

css flexbox

.split-right { 
    display: flex;
    justify-content: center; // center horizontally
    align-items: center; // center vertically
}

---

你能提供一个有效的演示吗？@KareemDabbeet用jsfiddle更新了问题谢谢你的回答。页脚上方的“向右拆分”窗格中有大量内容。我不能影响它的定位。我只需要将页脚居中。使用JSFIDLE查看更新后的问题。实际上，它很有帮助。谢谢！标记为接受。