How do I center my content in the middle of the screen?

[Codeman]

I have the text and <a> tags for the buttons but I try everything my stuff does not go to the middle of the screen.

         <section class="banner_main">
            <div class="container-fluid">
               <div class="row d_flex">
                  <div class="col-md-5">
                     <div class="text-bg">
                        <h1>Hire Me!<br>Coding</h1>
                        <span>Lessons Too!!!!</span>
                        <a href="#">Hire Me!</a>
                        <br>
                        <br>
                        <a href="#">Take The Lesson</a>
                     </div>
                  </div>
                  </div>
               </div>

.text-bg {
     text-align: center;
     max-width: 429px;
     width: 100%;
     padding-top: 190px;
     padding-bottom: 50px;
}

.text-bg h1 {
     color: #ffffff;
     font-size: 67px;
     line-height: 90px;
     padding-bottom: 70px;
     font-weight: bold;
     
}

.text-bg strong {
     font-size: 27px;
     line-height: 35px;
     color: #2d2c2c;
}

.text-bg span {
     font-family: 'Baloo Chettan', cursive;
     color: rgb(43, 255, 0);
     font-size: 40px;
     line-height: 50px;
     font-weight: bold;
     display: block;
     background-color: rgb(5, 0, 0);
     width: 80%;
     text-align: center;
     border-radius: 30px;
     margin-bottom: 30px;
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.text-bg a {
     font-size: 17px;
     background-color: #2d2c2c;
     color: #fff;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 15px;
}

.text-bg a:hover {
     background-color: #2bcc91;
     color: #fff;
     transition: ease-in all 0.5s;
     border-radius: 26px;
}

[Erik_J]

@Codeman

…but I try everything my stuff does not go to the middle of the screen.

I think you need to look at the parent’s CSS to understand why it doesn’t.

If you’re using a framework, check what the docs say.

[Gandalf]

Off-topic
I would think you need to learn more HTML and CSS before you start offering lessons!

[TechnoBear]

For general reference, this is a good guide to centring things:

Centering in CSS: A Complete Guide | CSS-Tricks

However, as Erik says, if you are using Bootstrap, you will need to check the documentation and work within the framework.

I would question whether Bootstrap is necessary or appropriate in this instance. It is not like a site builder, which makes it easier to design something with little or no coding knowledge. Bootstrap requires a good understanding of both CSS and the rules of the framework. I would suggest you forget about it until you are much more familiar with CSS, especially for a small site.

And why are you still using <br> tags for spacing, when you’ve asked about it and been told that is an incorrect use? Use CSS, and if you don’t know how to do that, then ask for guidance.

[PaulOB]

As others have said look at the documentation first and you will see you need a justify-content-center class added to the html here:

<section class="banner_main">
  <div class="container-fluid">
    <div class="row justify-content-center">

There is no d_flex class it is d-flex and is not needed there as a row is already a flexbox.

Then you need to centre your boxes with margin auto because the containers they sit in are wider than the element you want centred,

e.g.

.text-bg,.text-bg span{
  margin-left:auto;
  margin-right:auto;
}

As others have said please get a solid grasp of CSS first before you start using a framework. Chances are that once you know what you are doing you won’t reach for the framework anyway.