在 parent 中居中元素直到达到 top-left 边界，然后停止居中并显示滚动条？

Question

我想在 parent 中居中放置一个元素。使用 transform、flexbox、grid 等就足够简单了…… 问题是overflow-behavior。 当 parent 缩小到 child 以下时，会出现滚动条。但是他们不允许我滚动到 child 的 top-left。 这就是我的意思： gif animation showing window-resizing and the css behavior

此示例使用 flexbox 居中，html 下面：

b {
  color: white;
}

html {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
}

header {
  position: absolute;
  top: 0;
  height: 84px;
  width: 100%;
  background-color: darkolivegreen;
}

footer {
  position: absolute;
  bottom: 0;
  height: 56px;
  width: 100%;
  background-color: darkslateblue;
}

main {
  position: absolute;
  top: 84px;
  bottom: 56px;
  width: 100%;
  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

div.content {
  flex-shrink: 0;
  width: 600px;
  height: 600px;
  background-color: darkred;
}

<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->

<body>

  <header>
  </header>

  <main>
    <div class="content">
      <b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
    </div>
  </main>

  <footer>
  </footer>

</body>

</html>

我想要实现的看起来更像这样： gif animation showing window-resizing and the css behavior

在这个例子中我没有使用flexbox-centering。我将内容包装在一个容器中，该容器的边距设置为：0 auto。这将在 x-axis 上实现所需的行为，但不会在 y-axis 上实现。我怎样才能在两个轴上实现这个？

下面第二个例子的html和css使用容器和auto-margin进行居中：

b {
  color: white;
}

html {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
}

header {
  position: absolute;
  top: 0;
  height: 84px;
  width: 100%;
  background-color: darkolivegreen;
}

footer {
  position: absolute;
  bottom: 0;
  height: 56px;
  width: 100%;
  background-color: darkslateblue;
}

main {
  position: absolute;
  top: 84px;
  bottom: 56px;
  width: 100%;
  background-color: #222222;
  /* display: flex;
      justify-content: center;
      align-items: center; */
  overflow: auto;
}

div.container {
  margin: 0 auto;
  width: 600px;
  height: 100%;
  background-color: #333333;
}

div.content {
  /* flex-shrink: 0; */
  width: 600px;
  height: 600px;
  background-color: darkred;
}

<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->

<body>

  <header>
  </header>

  <main>
    <div class="container">
      <div class="content">
        <b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
      </div>
    </div>
  </main>

  <footer>
  </footer>

</body>

</html>

啊...我希望找到一个不使用 javascript 的解决方案。如果我找到解决方案，我会 post 它和相应的 gif。

Answer 1

在 .container 上使用 display: flex，在 .content 上使用 margin: auto。

这是解决flex居中问题的一种方法，这样就会居中.content

b {
  color: white;
}

html {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
}

header {
  position: absolute;
  top: 0;
  height: 84px;
  width: 100%;
  background-color: darkolivegreen;
}

footer {
  position: absolute;
  bottom: 0;
  height: 56px;
  width: 100%;
  background-color: darkslateblue;
}

main {
  position: absolute;
  top: 84px;
  bottom: 56px;
  width: 100%;
  background-color: #222222;
  /*display: flex;
  justify-content: center;
      align-items: center; */
  overflow: auto;
}

div.container {
  display: flex;
  margin: 0 auto;
  width: 600px;
  height: 100%;
  background-color: #333333;
}

div.content {
  /* flex-shrink: 0; */
  margin: auto;
  width: 600px;
  height: 600px;
  background-color: darkred;
}

<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->

<body>

  <header>
  </header>

  <main>
    <div class="container">
      <div class="content">
        <b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
      </div>
    </div>
  </main>

  <footer>
  </footer>

</body>

</html>

在 parent 中居中元素直到达到 top-left 边界，然后停止居中并显示滚动条？

Center element in parent until it reaches top-left bounds, then stop centering and show scrollbars?

html

css

overflow

scrollbar

centering