如何垂直居中第一个弹性框，列表的其余部分如下

Question

给定此标记，列表中的第一项应在屏幕中垂直居中，其余项应紧随其后。但是，它根本不垂直居中。此外，它不需要基于项目高度的硬编码值（项目应该能够具有动态高度）。

* {
  position: relative;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden;
}
div {
  display: flex;
}
body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
  flex-direction: column;
}
body > div > div {
  max-width: 600px;
  border: 1px solid black;
  width: 100%;
}
body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
  flex: 1;
  width: 100%;
}
body > div {
  top: 50%;
}
body > div > div {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>

Answer 1

给这个 css 作为中心

body > div:first-child {
 margin-top:20px;
}
body > div > div{
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

* {
  position: relative;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden;
}
div {
  display: flex;
}
body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
  flex-direction: column;
}
body > div > div {
  max-width: 600px;
  border: 1px solid black;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
  flex: 1;
  width: 100%;
}
body > div:first-child {
 margin-top:20px;
}

<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>

Answer 2

假设项目将动态调整大小，并且要单独使用 CSS 解决此问题，则需要进行少量标记更改。

第一个项目将有自己的包装器，然后，用一个伪包装器与第二个包装器匹配，我们可以给伪包装器和第二个包装器flex: 1平均共享body的高度，减去第一个包装器的内容，这样，无论每个项目的大小如何，第一个项目都将居中。

body > div > div规则中的flex-shrink: 0;可防止项目在太多时倾斜以适合。

堆栈代码段

* {
  position: relative;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {                                          /*  added rule  */
  display: flex;
  flex-direction: column;
  margin: 0;
}
body::before, body > div:nth-child(2)  {        /*  added rule  */
  content: '';
  flex: 1;
}
div {
  display: flex;
}
body > div {
  flex-direction: column;
  align-items: center;
}
body > div > div {
  max-width: 600px;
  border: 1px solid black;
  width: 100%;
  flex-shrink: 0;                               /*  added  */
}
body > div > div > div {
  border: 1px solid blue;
  background: red;
  min-height: 30px;
  flex: 1;
}
/*  middle marker for this demo only  */
span {position: absolute; width: 30px; height: 50%; right: 0; background: lime; z-index: 100}

<div>
  <div>
    <div>Hey<br>Hey<br>Hey<br></div>
  </div>
</div>
<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div>Hey<br>Hey<br>Hey<br></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>
<span>50% high</span>