Html 如何将第一个flexbox垂直居中，列表的其余部分如下

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

*{
位置：相对位置；
框大小：边框框；
}
html，正文{
身高：100%；
溢出：隐藏；
}
div{
显示器：flex；
}
正文>div{
对齐项目：居中；
-webkit盒包：中心；
-webkit内容：中心；
证明内容：中心；
边框：1px实心橙色；
弯曲方向：立柱；
}
正文>div>div{
最大宽度：600px；
边框：1px纯黑；
宽度：100%；
}
正文>分割>分割>分割{
边框：1px纯蓝色；
背景：红色；
高度：30px；
弹性：1；
宽度：100%；
}
正文>div{
最高：50%；
}
正文>div>div{
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}

---

将此css用于中心

body > div:first-child {
 margin-top:20px;
}

body > div > div{
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

*{
位置：相对位置；
框大小：边框框；
}
html，正文{
身高：100%；
溢出：隐藏；
}
div{
显示器：flex；
}
正文>div{
对齐项目：居中；
-webkit盒包：中心；
-webkit内容：中心；
证明内容：中心；
边框：1px实心橙色；
弯曲方向：立柱；
}
正文>div>div{
最大宽度：600px；
边框：1px纯黑；
宽度：100%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
正文>分割>分割>分割{
边框：1px纯蓝色；
背景：红色；
高度：30px；
弹性：1；
宽度：100%；
}
body>div：第一个孩子{
边缘顶部：20px；
}

---

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

第一个项目将有自己的包装，然后，使用伪包装匹配第二个包装，我们可以让伪包装和第二个包装

flex:1

平均共享

主体的高度减去第一个包装的内容，这样，无论每个项目的大小，第一个项目都将居中

flex收缩：0body>div>div
规则中的code>可防止物品过多时掉落

堆栈片段


*{
位置：相对位置；
框大小：边框框；
}
html，正文{
身高：100%；
溢出：隐藏；
}
正文{/*添加了规则*/
显示器：flex；
弯曲方向：立柱；
保证金：0；
}
body:：before，body>div:n子级（2）{/*添加了规则*/
内容：''；
弹性：1；
}
div{
显示器：flex；
}
正文>div{
弯曲方向：立柱；
对齐项目：居中；
}
正文>div>div{
最大宽度：600px；
边框：1px纯黑；
宽度：100%；
弹性收缩：0；/*已添加*/
}
正文>分割>分割>分割{
边框：1px纯蓝色；
背景：红色；
最小高度：30px；
弹性：1；
}
/*仅此演示的中间标记*/
span{位置：绝对；宽度：30px；高度：50%；右侧：0；背景：石灰；z指数：100}

嘿
嘿
嘿

嘿
嘿
嘿

50%高
根据您的反馈进行更新。还没有，请参见更新的示例。第一个项目居中，但之后其他项目都不顺利（存在差距）。根据您的反馈更新问题和答案。谢谢。但是你不想根据屏幕高度进行中心分割…？事实上你是对的，如果元素从30px改为500px，在较小的屏幕尺寸下仍然存在错误。尝试将列表中的第一项居中，而你的示例将容器居中。当你说动态高度时，是不是每个项目都是如此，即第一个可以是50px，第二个可以是100px等等？顺便说一句，
body
的默认
margin
在您的代码示例中设置了一点，并且
body{margin:0；}
修复了这个问题。