Html 如何在不居中导航栏的情况下垂直居中主体元素

所以我有一个页面，上面有一个

navbar

和一堆内容。守则的大纲如下：

.container{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

---

您可以为容器指定固定宽度：

.container {

max-width: 860px;
margin-right: auto;
margin-left: auto;
}

---

您可以这样做：

html，正文{高度：100%}/*必填项*/
正文{margin:0}/*必填*/
身体{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
navbar先生{
位置：绝对位置；
顶部：calc（50%-150px）；/*向下移动屏幕高度的50%-容器高度的一半-导航栏高度*/
宽度：1200px；
最大宽度：100%；
高度：50px；
背景：卡其色；
}
.集装箱{
宽度：1200px；
最大宽度：100%；
高度：200px；
背景：薰衣草；
}

---

您可以将body设置为列

flex

容器，并使用

margin

作为

.navbar

和

.container

而不是

对齐flex父项中的内容
和
对齐项目

所需基本代码：


html，
身体{
身高：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
navbar先生{
保证金：0自动；
}
.集装箱{
保证金：自动；
}
navbar
容器