html - 将内容水平和垂直居中部分不在整页上

Question

所以我已经在部件中创建了一个导航栏，<header>并在我的网站上创建了一个页脚。我也有<div class="UUDiv">一个段落和一个标题<main>。现在，我想<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>

谢谢你的帮助！

标签： htmlcsscentering

Answer 1

Try The below Code Snippet.

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>