如何将固定标题置于考虑滚动条的中心位置？

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 demo 。