Looking to position content at the vertical midpoint for a polished look?

Question

Looking to position content at the vertical midpoint for a polished look?

Struggling to center the 'MAIN' content vertically in the middle of the page despite trying various methods.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d0cad1cad7">[email protected]</a>/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>

Even tried using flexbox but the text just won't budge.

javascript html css bootstrap-4

Answer 1

Answer №1

I've also experimented with flexbox

Achieving vertical centering in CSS Flexbox can be done by using the following properties:

flex-direction: column
justify-content: center

Here's a functional example:

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

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

Answer 2

I've also experimented with flexbox

Achieving vertical centering in CSS Flexbox can be done by using the following properties:

flex-direction: column
justify-content: center

Here's a functional example:

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

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

Answer 3

Answer №2

Made some tweaks to the HTML structure: https://codepen.io/emmeiWhite/pen/PoGeJze

UPDATED CODE SNIPPET:

*{
  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>

Answer 4

Made some tweaks to the HTML structure: https://codepen.io/emmeiWhite/pen/PoGeJze

UPDATED CODE SNIPPET:

*{
  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>

Looking to position content at the vertical midpoint for a polished look?

Answer №1

Answer №2

Similar questions

Ways to turn off the dragging animation for cdkDrag?

determine the proportion of the item

Adding text to several elements by class in Vue.js

Changing jQuery to plain JavaScript in order to show a div element more effectively

What's preventing the buttons from shifting positions?

I have a JSON file that I want to parse and display the data on my website from my local server

Tips for displaying complex JSON structures in VueJS

pattern validation using a regular expression

Graph not displaying dates on the x-axis in flot chart

Storing data in a text or HTML file using server-side JavaScript

A step-by-step guide on revealing a complete div upon selection

Bootstrap version 4.1 featuring two columns that overlap each other

Unable to modify primary color within Understrap theme

Is it possible to transfer a child from one parent to another using JavaScript?

Cube.js Highlights of the Week and Month

AngularJS ng-repeat is not updating when the state changes

Utilizing React Typescript Discriminating Unions to choose between two different types based solely on props

What is the best way to extract numbers from a string using JavaScript?

Error in Next.js 13 due to Prisma table mapping causing hydration issues

Alter the color of text when hovering over the caption with a mouse