html - 如何使可滚动内容与标题居中？

Question

我正在尝试将一些内容居中。内容比父级大，因此需要滚动。顶部还有一个标题。出于某种原因，滚动高度剪切了可滚动的内容。关于我应该如何解决这个问题的想法？

这是 fiddle :https://jsfiddle.net/xgsqyu45/

.app {
  height: 400px;
}

.header {
  width: 100%;
  height: 44px;
  background-color: grey;
  border: 2px solid;
}

.container {
  border: 1px solid red;
  height: 100%;
}

.scroll {
  overflow: scroll;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  height: 600px;
  width: 300px;
  margin: 12px;
  border: 2px solid blue;
}

<div class="app">
  <div class="header">
  </div>
  <div class="container">
    <div class="scroll">
      <div class="content">
      </div>
    </div>
  </div>
</div>

Answer 1

documentation说:

center
The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.

flex 中心使用 height 400px 计算。所以 align-items: center 使内容从顶部溢出 100px。

 100 = (600 - 400) / 2

here,
600 = content height
400 = .scroll and container height

注意 .scroll 是如何变成 500px scrollHeight 的而不是 600px。少了 100px。

---

解决方法:
如果内容比容器高，我们可以使用 CSS 对其进行转换 calc()功能。假设您想将较短的内容放在中心位置，我们可以使用以下解决方案。以“全页”模式查看。

:root {
  --app-height: 400px;
  --content-margin-top: 12px;
}

* {
  box-sizing: border-box;
}

.app {
  height: var(--app-height);
}

.header {
  width: 100%;
  height: 44px;
  background-color: grey;
  border: 2px solid;
}

.container {
  border: 1px solid red;
  height: 100%;
  position: relative;
}

.scroll {
  overflow-y: scroll;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  height: 600px;
  width: 300px;
  margin: 12px;
  border: 2px solid blue;
  position: relative;
  
  transform: translateY(calc((max(100% + var(--content-margin-top), var(--app-height)) - var(--app-height)) / 2));
}


/* center lines for debugging */
.content::after {
  content: "-";
  color: blue;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 100%;
  border-bottom: 1px dashed rgba(0, 0, 255);
  line-height: 3px;
}

.container::after {
  content: "-";
  color: red;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 100%;
  border-bottom: 1px dashed rgba(255, 0, 0);
  line-height: 3px;
}

<div class="app">
  <div class=header></div>
  <div class="container">
    <div class="scroll">
      <div class="content">content1</div>
      <div class="content" style="height: 200px;">content2</div>
    </div>
  </div>
</div>

虚线标记内容和容器的中心。

---

2022 年 2 月 10 日更新: 简单的解决方案 以涵盖评论中提到的新要求。
我认为我们把事情复杂化了。我们只需要 margin:auto 和 flex-shrink:0 来解决所有问题:

* {
  box-sizing: border-box;
}

.app {
  height: 400px;
  width: 80%;
  margin-bottom: 5rem;
}

.header {
  width: 100%;
  height: 44px;
  background-color: grey;
  border: 2px solid;
}

.container {
  border: 1px solid red;
  height: 100%;
  position: relative;
}

.scroll {
  overflow: auto;
  height: 100%;
  padding: 12px;
  display: flex;
}

.content {
  position: relative;
  border: 2px solid blue;
  
   margin: auto;
   flex-shrink: 0;
}


/* center lines for debugging */
.content::after {
  content: "-";
  color: blue;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 100%;
  border-bottom: 1px dashed rgba(0, 0, 255);
  line-height: 3px;
}

.container::after {
  content: "-";
  color: red;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 100%;
  border-bottom: 1px dashed rgba(255, 0, 0);
  line-height: 3px;
}

<div>1. Small content</div>
<div class="app">
  <div class=header></div>
  <div class="container">
    <div class="scroll">
      <div class="content" style="height: 100px; width:100px;">content1</div>
    </div>
  </div>
</div>
<hr>
<div>2. Taller content</div>
<div class="app">
  <div class=header></div>
  <div class="container">
    <div class="scroll">
      <div class="content" style="height: 600px; width:100px;">content1</div>
    </div>
  </div>
</div>
<hr>
<div>3. Wider content</div>
<div class="app">
  <div class=header></div>
  <div class="container">
    <div class="scroll">
      <div class="content" style="height: 100px; width:120vw;">content1</div>
    </div>
  </div>
</div>

<hr>
<div>4. Taller and wider content</div>
<div class="app">
  <div class=header></div>
  <div class="container">
    <div class="scroll">
      <div class="content" style="height: 600px; width:120vw;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem ad perspiciatis earum atque dolorum laborum corrupti animi? Dolor, laudantium! Non cupiditate in eligendi modi temporibus at maiores iste tempora accusantium dolorem quibusdam magnam
        totam, rem voluptatum distinctio sapiente debitis praesentium unde esse corporis perferendis id amet autem. Reprehenderit, non molestias?
      </div>
    </div>
  </div>
</div>

在情况 3 中，注释滚动条由于 this issue 稍微移动了内容.用户代理以不同方式处理滚动条宽度。