'Centering a div under other divs in Bootstrap 5 [duplicate]

I have some basic HTML (zero CSS) which aims to display a title at the top of a page, then a piece of text in the center. This is my code:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid">
  <div class="d-flex flex-column min-vh-100">
    <h1 class="text-center my-4">Title</h1>
    <div class="d-flex flex-grow-1 justify-content-center align-items-center">
      <div>Centered!</div>
    </div>
  </div>
</div>

However, the top div seems to be offsetting the position of the middle one (I want the middle one centered in the page). Thanks for any help, I'm new to this!

htmlcsstwitter-bootstrapbootstrap-5


Solution 1:[1]

A solution is to add the fixed-top to the h1. This way it stops consuming vertical space.

See below:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>



<div class="container-fluid">
<h1 class="text-center my-4 fixed-top">Title</h1>
    <div class="d-flex flex-column min-vh-100">
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">
            <div>Centered!</div>
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cristián Ormazábal

Related Questions