Want to center content in the middle vertically

Question

I want to center 'MAIN' content in the middle of the page vertically but whatever I do I don't know why it doesn't work.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
  body {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img link) background-size: cover;
    background-position: center;
  }
  
  .brandFont {
    font-family: 'Staatliches', cursive;
    font-size: 2rem;
  }
</style>

<body class='text-center text-white'>
  <div class='w-100'>
    <nav class='navbar navbar-dark bg-dark'>
      <span class="brandFont navbar-brand mb-0 h1">TEXT HERE</span>
    </nav>
    <main class='container'>
      <h1>
        TEXT HERE
      </h1>
      <h2>
        LONGER TEXT HERE
      </h2>
    </main>
  </div>

</body>

I have tried also with flexbox but it seems like the text doesn't want to move much

Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Priya jain, Jan 05 '21 at 11:30

score 0 · Answer 1 · answered Jan 05 '21 at 11:34

0

I have tried also with flexbox

Yes, you can achieve vertical centering in CSS Flexbox using:

flex-direction: column
justify-content: center

Working Example:

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<main class='container'>
  <h1>TEXT HERE</h1>
  <h2>LONGER TEXT HERE</h2>
</main>

answered Jan 05 '21 at 11:34

Rounin

27,134
9
83
108

thank you. it kind of works but I want to have page vh also with navbar. When someone loading the page, the user should see navbar and the text. With the code you have given me I can still scroll down and navbar isn't seen which shouldn't be this way. Don't know if you get what I mean – Anette X Jan 05 '21 at 11:47
The code I've given you illustrates how to vertically align content in the middle of an element, using CSS Flexbox. That's the tool you need to put together your own implementation. – Rounin Jan 06 '21 at 10:51

Imran Rafiq Rather · Accepted Answer · 2021-01-05T23:22:09.250

-2

Have made some changes in HTML : https://codepen.io/emmeiWhite/pen/PoGeJze

FULL WORKING CODE:

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.hero-wrapper{
      min-height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)), url(https://picsum.photos/id/1/367/267) center top;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container{
  color:#fff;
  text-align:center;
}

.navbar{
  position:absolute;
  left:0;
  top:0;
  right:0;
  background:yellow;
  padding:0.5rem;
  opacity:0.5;
  color:red;
}

<body class='text-center text-white'>
<div class='hero-wrapper'>
    <nav class='navbar navbar-dark bg-dark'>
        <span class="brandFont navbar-brand mb-0 h1">TEXT HERE</span>
    </nav>
    <main class='container'>
      <div>
        <h1>
            TEXT HERE
        </h1>
        <h2>
            LONGER TEXT HERE
        </h2>
        <p>People of this world are travellers</p>
      </div>
    </main>
</div>

edited Jan 05 '21 at 23:22

answered Jan 05 '21 at 11:34

Imran Rafiq Rather

7,677
1
16
35

thank you. it kind of works but I want to have page vh also with navbar. When someone loading the page, the user should see navbar and the text. With the code you have given me I can still scroll down and navbar isn't seen which shouldn't be this way. Don't know if you get what I mean – Anette X Jan 05 '21 at 11:47
Hmmm. OKKK. Could you share with my the image of your final output my Friend. I will fix this for you... :) Once I get free... And it's a promise :) Just share the image.. I don't know the full context... – Imran Rafiq Rather Jan 05 '21 at 11:59
https://drive.google.com/drive/folders/1AuCDPLjRmRkNPP7t-nC-KJi69YtJs0yW?usp=sharing here is the link where are photos. I have added comment in them so you could better understand what is going on – Anette X Jan 05 '21 at 12:20
yes, full height, without scroll – Anette X Jan 05 '21 at 12:54
yeah, something like that – Anette X Jan 05 '21 at 13:00

Want to center content in the middle vertically

2 Answers2