Css 使用FlexBox垂直居中元件

试图将FlexBox仅用于演示目的。但是，在parent.top导航栏中垂直居中文本时遇到问题。使用“对齐内容”：我可以在需要的位置水平放置这两个元素，但是我没有运气居中。在顶部导航栏中垂直接触和帮助。所有这样做的尝试似乎都将文本与页面的最上边缘对接

HTML:

CSS:

所有这样做的尝试似乎都将文本与最上面的部分相抵触 书页的边缘

但这就是.top导航栏所在的位置-它是一个div，其高度在CSS中定义为40px，在HTML中之前没有任何内容，因此它将始终位于页面顶部

如果设置.top导航栏{height:100%；}，则.top导航栏将是其父项100vh的高度，然后它的内容可以垂直居中，这是您使用“对齐项目：居中”正确指示的

.第1节{ 背景：urlurl/of/image.jpg顶部中心不重复； 背景尺寸：封面； 背景附件：固定； } .盒子{ 溢出：隐藏； 宽度：100%； 高度：100vh； 背景：90281F； } .顶部导航栏{ 最大宽度：1200px； 宽度：100%； 身高：100%； 保证金：0自动； 字号：0.813em； 背景：粉红色； 显示器：flex； 弯曲方向：行； 对齐项目：居中； 证明内容：之间的空间； } .联系方式{ 背景：红色 } .救命{ 背景：绿色 } Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

---

尝试将父容器设置为display:table，子容器设置为display:table，然后将垂直对齐：中间应用于子容器。header.section1.box.顶部导航条显示：表格。包装显示：表格单元格。联系p Lorem ipsum dolor sit amet。帮助p Lorem ipsum dolor sit amet。但是FlexBox不应该减轻处理显示和浮动以及其他类似事情的负担吗？我确定FlexBox处理主框相对于浏览器尺寸的对齐。。虽然不确定，但我没用过。希望这能帮上忙。你让人们很难通过HTML/CSS来帮助你。我不知道。为了更好地理解，我将把它放在代码笔中。为了进一步理解，我将代码笔链接添加到OP中。@bmoneruxui-使用你的inspector工具，你的骨架框架在.top导航栏的段落底部添加了一个2.5rem的底边距……而在代码笔中，你实际上没有.top导航栏{align items:center；}这就是在弹性行中垂直居中的项目，相对于彼此。谢谢。为我辩护，我在狩猎中使用了督察，这是我讨厌的。最后修复了它，但是为什么当我在p标签上放置margin:0时它没有改变？实际上，我必须将边距放在底部：0，我的CSS规则应该放在骨架之后。

  header.section1.box
    .top-nav-bar
      .contact
        p Lorem ipsum dolor sit amet
      .help
        p Lorem ipsum dolor sit amet

.section1
  background:
    image: url(url/of/image.jpg)
    size: cover
    position: top center
    repeat: no-repeat
    attachment: fixed

.box
  overflow: hidden
  width: 100%
  height: 100vh
  background:
    color: #90281F

.top-nav-bar
  max-width: 1200px
  width: 100%
  height: 40px
  margin: 0 auto
  font-size: 0.813em
  background: pink
  display: flex
  flex-direction: row
  align-items: center
  justify-content: space-between

.contact
  background: red

.help
  background: green