Text in die Mitte von div verschieben, ohne div kleiner zu machen

Question

Also habe ich ein paar der Vorschläge in anderen Posts ausprobiert, aber ich zwinge meinen gesamten Bildbereich dazu, kleiner zu werden, wenn ich den Text nach oben verschiebe Mitte des Kopfbereichs.

Ich möchte den Text "wir sind .." in die obere Mitte (gelber Text über dem Bild) platzieren. Ich habe versucht, Padding/Margen und auch Align-Content, aber es zwingt nur den gesamten Bereich kleiner zu werden .. irgendwelche Vorschläge, wie ich den Text nach oben zwingen kann?

Hier ist the page

Hier ist der Code für die Schnittflächen:

<section class="meta-wrapper parallax" style="background-image: url('content/about_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20"> 
      <div id="page_header"> 
       <div class="container text-center"> 
        <h2><span>We are</span><br>Outside The Line</h2> 
       </div> 
      </div><!-- end page_header --> 
     </section><!-- end section --> 

Hier ist die CSS-I bei Bearbeitung suchen (dies die Textposition steuert, sondern ist auch der Behälter .. so ich bin nicht sicher, ob ich soll etwas auf die H2-Tags tun oder vielleicht einen neuen CSS-Tag für diese bilden?

#page_header h2 { 
    color:#fff; 
    border-bottom:0 !important; 
    font-size:50px; 
    text-transform:uppercase; 
} 
#page_header h2 span { 
    font-size:60px; 
    border:3px solid #fff; 
    padding:4px 20px; 
} 

#page_header .container-fluid h2 { 
    left:10%; 
    bottom:15%; 
    position: absolute; 

hatte ich versucht, vertical-align usw., aber dies nur tut nichts .. Ich schätze, ich mit der Polsterung etc. zu spielen, um brauchen, aber ich scheine ein wenig hängen zu bekommen dies zu bekommen ohne sich zu rühren alles andere zu bewegen ..

Answer 1

ändern diese:

#page_header{ 
    padding:30rem 0 ; 
} 

dies:

#page_header { 
    padding: 0 0 60rem; 
} 

die Idee ist, die Gesamtmenge der Polsterung (60rem), sondern bewegen sich alle Polster nach unten, statt gleichmäßig auf der Ober- und Unterseite zu erhalten.

Answer 2

Ihre CSS wie folgt ersetzen:

#page_header .container { 
    z-index: 1; 
    position: absolute; 
    top: 20px; 
    left: 45%; 
    text-align: center; 
} 

Answer 3

Zum einen Dank für die Hilfe von den beiden, die beantwortet.

Nachdem ich mit dem #page_header herumgespielt habe, schaffte ich es, den Titel zu bekommen, wo ich wollte.

Der Code, den ich verwendete, war;

#page_header 
    { 
     padding: 10rem 0 60rem!important; 
    }