HTML: How do I vertical-align my text into center?-CodePudding

I tried with many different css property including vertical-align: center, I even tried 100% height and 100% width, but no luck. It's been almost a hour.

Text align only on middle horizontal and top on vertical but I want my text in center(middle on vertical). Any suggestion?

Here is my HTML code:

*
{
  margin: 0;
  padding: 0;
}
body
{
  background-color: black;
  color: white;
}
.welcome-section
{
  text-align: center;
  margin: auto;
  height: 100%;
}

<section id="welcome-section" >
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>

Any help is appreciated!

CodePudding user response：

*
{
  margin: 0;
  padding: 0;
}
body
{
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.welcome-section
{
  text-align: center;
}

<section id="welcome-section" >
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>

CodePudding user response：

for your problem you just need to set the size of the container.

.welcome-section
{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto;
}

That should work

CodePudding user response：

*
{
  margin: 0;
  padding: 0;
}
body
{
  background-color: black;
  color: white;
}
.welcome-section
{
  text-align: center;
  margin: auto;
  height: 100vh;
  box-sizing: border-box;
  padding-top:40vh;
}

<section id="welcome-section" >
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>

CodePudding user response：

Try using flexbox like this.

*
{
  margin: 0;
  padding: 0;
}
body
{
  background-color: black;
  color: white;
}
.welcome-section
{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section id="welcome-section" >
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>