Text within component won't align vertically [duplicate]

Solution 1:

You seem to be using properties of flexbox and grid without declaring them first. To use properties such as grid-column, justify-content, etc... You first need to declare the display property, whether it's flex or grid. I've added a snippet below for your reference. Read more on flexbox and grid here and here respectively.

Using grid to align h1 to the center of the container:

.banner-cont {
  display: grid;
  background: #0193FD;
  place-items: center;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}

.banner-cont h1{
  color: #fff;
}

<div class="banner-cont">
  <h1>Title</h1>
</div>

Using flexbox to align h1 horizontally:

.banner-cont {
  display: flex;
  background: #0193FD;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}

.banner-cont h1 {
  color: #fff;
}

<div class="banner-cont">
  <h1>Title</h1>
</div>

Solution 2:

Add display: grid; to .banner-cont

.banner-cont {
    height: 120px;
    width: 100%;
    grid-column: 1 / span 2;
    display: grid;
    background-color: #0193fd;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Result: