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

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>

谢谢你的帮助！

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>