在 <main> 部分中水平和垂直居中内容不在整页上

Question

所以我已经在<header> 部分创建了一个导航栏，并在我的网站上创建了一个页脚。我的<main> 部分中还有一个<div class="UUDiv">，其中包含一个段落和一个标题。现在，我想将<div class="UUDiv"> 水平和垂直居中，但只在主要部分。使用下面的代码，我只将它集中在整个页面的中心，所以我的 Div 与我的页脚重叠......这是我的代码：\

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.UUDiv {
  text-align: center;
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
}

<header class="RestHeader">
  <nav class="navigation">Navigation...with
    <ul>
      <li> List </li>
    </ul>etc.</nav>
</header>
<main>
  <div class="UUDiv">
    <h1>Headline</h1>
    <p>Text</p>
  </div>
</main>
<footer>
  <div class="footer">Footer...with
    <ul>
      <li> Another List </li>
    </ul> etc.</div>
</footer>

感谢您的帮助！

Answer 1

您可以使用 flexbox 来代替绝对定位您的 div。 给你的<main> 一个display: flex 并像这样将它的内容居中：

main {
  display: flex;
  align-items: center;
  justify-content: center;
}
.UUDiv {
  text-align: center;
}

然后它将保持在您的<main> 的中心。

完整示例：

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  display:flex;
  align-items:center;
  justify-content:center;
}
.UUDiv {
  text-align: center;
}

<header class="RestHeader">
  <nav class="navigation">Navigation...with
    <ul>
      <li> List </li>
    </ul>etc.</nav>
</header>
<main>
  <div class="UUDiv">
    <h1>Headline</h1>
    <p>Text</p>
  </div>
</main>
<footer>
  <div class="footer">Footer...with
    <ul>
      <li> Another List </li>
    </ul> etc.</div>
</footer>

Answer 2

试试下面的代码片段。

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.UUDiv {
  text-align: center;
  display:flex;
  justify-content:center;
  align-items:center;
}
  
 ul{
   display:flex;
   list-style:none;
 }
 ul li{
  margin-left:1rem;
 }

<header class="RestHeader">
  <nav class="navigation">Navigation...with
    <ul>
      <li> List </li>
      <li> List </li>
    </ul>
 </nav>
</header>
<main>
  <div class="UUDiv">
    <h1>Headline</h1>
    <p>Text</p>
  </div>
</main>
<footer>
  <div class="footer">Footer...with
    <ul>
      <li> Another List </li>
      <li> Another List </li>
    </ul> 
  </div>
</footer>