<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

试试下面的代码片段。

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>

Answer 2

您可以使用 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>

<main> 部分内容水平和垂直居中，而不是整页

Center Content horizontally and vertically in <main> Part not on Full Page

html

css

centering