With Bootstrap, how do I adjust position of text inside hero image?

Question

My goal is to create a hero image in Bootstrap. I found a few different examples of this after searching the web. I copied this example:bootply example

I have white text in two sizes against a dark image. It's fine, except the text is positioned at the top of the image. How do I control its position?

I want the result to look good on different viewport widths. This is the pattern I desire.

On a large viewport the title and tagline would fit on one line each:

|----------------------------------------------------|
|                                                    |
|                                                    |
|            Math Achievement Tutoring               |
|                                                    |
|                                                    |
|            Begin your math adventure!              |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|----------------------------------------------------|

On a smaller viewport the image would resize responsively, and the text would break over a couple lines each:

|--------------------------------|
|                                |
|       Math Achievement         |
|           Tutoring             |
|                                |
|        Begin your math         | 
|           adventure!           |
|--------------------------------|

The text size may have to be smaller at a smaller viewport width, otherwise it may overflow the bottom (this has happened to me):

|--------------------------------|
|                                |
|       Math Achievement         |
|           Tutoring             |
|                                |
|-----  Begin your math ---------| 
           adventure!           

A question: should the position be controlled via px/em, or via percentage of img size? And how do I do it?

What I have tried: Hero image HTML/CSS:

HTML:

  <div class="hero-unit">
    <h1 class="text-center">Math Achievement Tutoring</h1>
    <h2 class="text-center">Begin your math adventure!</h2>

  </div>

in custom.css:

.hero-unit {
    background-image:url('../images/fog.jpg');
    background-size:cover;
    background-color: #EEEEEE;
    height:500px;

  }
.hero-unit h1 {
    color: #FFFFFF;
    font-size: 60px;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0;
}
.hero-unit h2 {
    font-size: 25px;
    color: #FFFFFF;

}

Answer 1

you can use font size related to view width of screen

ex: font size:5vw; so when the window resize the font will resize depend on window width and it will not overflow

.hero-unit {
    background-image:url('../images/fog.jpg');
    background-size:cover;
    background-color: #000000;
    height:500px;

  }
.hero-unit h1 {
    color: #FFFFFF;
    font-size:8vw;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0;
}
.hero-unit h2 {
    font-size: 5vw;
    color: #FFFFFF;

}

<div class="hero-unit">
    <h1 class="text-center">Math Achievement Tutoring</h1>
    <h2 class="text-center">Begin your math adventure!</h2>

  </div>