不能居中<p>嵌套在 2 个 div 和一个部分内

Question

我正在尝试使我的段落居中，但尝试这样做的时间最糟糕：

.centerLoginForm {
display: flex;
justify-content: center;
}
.mainContent {
position: relative;
color: white;
width: 60%;
padding: 1.5% 2.5% 0 2.5%;
margin-top: 5%;
background-color: black;
border-radius: 5% 5% 5% 5%;
}
.underHead,
.underHead p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.underHead {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

<div class='centerLoginForm'>
<section class='mainContent'>
<h1>Welcome to the BYU Idaho Radio Intranet!</h1>
<div class='underHead'>
<p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
only with fewer connected computers.</p>
<p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>
<p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
</div>
</section>
</div>

如您所见，<p>标签内的文本遵循其自然位置，而不是遵循我在类.underHead中的内容。我已经尝试了text-align，content-align，justify-content，但我只是想不出一种方法来居中这些内容。

Answer 1

我认为这就是您要做的：

.centerLoginForm {
display: flex;
justify-content: center;
}
.mainContent {
position: relative;
color: white;
width: 60%;
padding: 1.5% 2.5% 0 2.5%;
margin-top: 5%;
background-color: black;
border-radius: 5% 5% 5% 5%;
}
.underHead {
display: block;
margin: auto;
width: 70%;
text-align: center;
}

<div class='centerLoginForm'>
<section class='mainContent'>
<h1>Welcome to the BYU Idaho Radio Intranet!</h1>
<div class='underHead'>
<p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
only with fewer connected computers.</p>
<p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>
<p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
</div>
</section>
</div>