如何在考虑滚动条的情况下将固定标题放在中心?

Question

我正在创建一个日历，标题中包含一周中几天的名称(su，mo...(。日历本身滚动，而我希望标题保持固定。这部分已经足够简单，使用位置固定或使日历div包含滚动条。

我遇到的最大问题是我将日期和星期几居中，滚动条使标题和内容上的中心不同。我发现的唯一解决方法是完全删除滚动条，但我希望滚动条可见。这可能吗？

提前致谢

.wrapper {
width: 100%;
.header {
position: fixed;
width: 100%;
.header-wrapper {
padding-left: 50%;
transform: translateY(-50%);
}
}
.content {
padding-left: 50%;
transform: translateY(-50%);
}
}

这是我的问题的一个淡化示例：https://jsfiddle.net/3hpj0s8L/

Answer 1

我给.wrapper一个display: flex，justify-content: center将所有子元素居中。

这使得每个子元素的定位具有padding/margin和transform: translate，甚至固定元素的width都过时了。

这是更新的JSFiddle 演示。