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

Question

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" class="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!

Check this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container — Mithun Shreevatsa, Apr 24 '22 at 06:25

score 1 · Answer 1 · answered Apr 24 '22 at 06:26

*
{
  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" class="welcome-section">
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>

uwo · Answer 2 · 2022-04-24T06:30:16.377

0

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

edited Apr 24 '22 at 06:30

answered Apr 24 '22 at 06:26

uwo

23
7

score 0 · Answer 3 · answered Apr 24 '22 at 06:40

0

*
{
  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" class="welcome-section">
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>

answered Apr 24 '22 at 06:40

Amanullah Paiwand

1
1

for full window height use vh not percentage and if want to move contents up and down change the value of top padding, and for keeping the section size controlled use box-sizing. – Amanullah Paiwand Apr 24 '22 at 06:42
Your explanation should be part of your answer, not a comment. – connexo Apr 24 '22 at 07:47

score 0 · Answer 4 · answered Apr 24 '22 at 07:42

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" class="welcome-section">
  <h1>Poseidon</h1>
  <p>Information Technology, Software Developer learner, and CTF Player.</p>
  <p>Security is a top priority!</p>
</section>

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

4 Answers4