html - 如何在不重叠两个 div 的情况下将段落在 div 中垂直居中？

Question

我不知道如何在这个 div 中将我的名字垂直居中。它应该是我网站上的主页。 PgOne div 应该占据人的屏幕高度，因此名称应该以 div(主)为中心，它就在 PgOne 上导航栏的下方。

有效解决方案的问题在于，当窗口在垂直方向上非常小时，它会碰到导航栏。

我已经在 .main 和 .name 下的 CSS 中尝试过这些

flex-grow: 1; 
display: flex; 
align-items: center;

^^ 这行得通，但是当窗口在垂直方向上真的很小时，它会碰到导航栏。

transform: translate(-50%, -50%);
position: absolute;

^^这可行，但是当窗口非常小时，它们会重叠。

padding-top: 10%; padding-bottom: 10%;

^^ 不起作用。

display: table-cell; 
text-align: center; 
vertical-align: middle;

^^ 不起作用。

这是我的代码:

<div class=PgOne>

    <div class="navbar">
        <div>
            <p>HOME</p>
        </div><div>
            <p>ABOUT</p>
        </div><div>
            <p>EXPERIENCE</p>
        </div><div>
            <p>RESUME</p>
        </div><div>
            <p>CONTACT</p>
        </div>
    </div>

    <div class=main>
        <div class="name">
            <p>FirstName<br>LastName</p>
        </div>
    </div>

</div>


CSS

.navbar div {
    margin-top: 13px;
    margin-right: 1%;
    width: 18%;
    font-size: 20px;
    display: inline-block;
    position: relative;
}
.main {
    font-size: 25px;
    margin: 0 auto;
    text-align: center;

    width: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;

    /*flex-grow: 1; 
    display: flex; 
    align-items: center;*/
}

Answer 1

名称​​是在其容器 DIV 中垂直居中。您只是没有为 div (.main) 设置任何高度，所以 DIV 本身不会跨越整个页面高度，如果这是您想要的。在我对下面代码的改编中，我使用 calc 作为高度(展开它可以看到)，但实际方法取决于您真正想要/需要的内容，即页面的完整代码。

.navbar div {
  margin-top: 13px;
  margin-right: 1%;
  width: 18%;
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #555;
}

.main {
  display: flex;
  justify-content: center;
  height: calc(100vh - 100px);
  background: #eee;
  align-items: center;
  font-size: 75px;
  margin: 0 auto;
}

<div class=PgOne>

  <div class="navbar">
    <div>
      <p>HOME</p>
    </div>
    <div>
      <p>ABOUT</p>
    </div>
    <div>
      <p>EXPERIENCE</p>
    </div>
    <div>
      <p>RESUME</p>
    </div>
    <div>
      <p>CONTACT</p>
    </div>
  </div>

  <div class=main>
    <p>FirstName<br>LastName</p>
  </div>

</div>