html - 无法将嵌套在 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>