Wie Seitentiteltext vertikal innerhalb des übergeordneten Bannerbildes zentriert wird?

Question

Ich habe für jede Seite meiner Website einen Seitentitel, der standardmäßig im Bannerbild für diese Seite platziert wird. Ich habe Lösungen eingeführt, die diese Seitentitel zentrieren, aber die Code-Implementierungen sind zwischen den Seiten inkonsistent. Das größte Problem ist die Zentrierung für mobile Geräte, bei der die Dinge von Seite zu Seite ein wenig wackelig werden können. Früher habe ich vorher diese Regel Text zu zentrieren, aber es verursacht Inkonsistenzen basierend auf Gerätebildschirmbreite:

@media screen and (max-width: 769px) { #banner-area { padding-top: 85px; }} 

Effektiv dieser Inhalt nach unten gedrückt werden, um die richtige Position am Telefon Bildschirmgrößen. Es scheint jedoch ein bisschen "hacky" und unelegant. Ich wurde später auf die translateY Eigenschaft, und leitete diesen Code, den Text zum Zentrum vertikal:

/* Page 1 */ 

@media screen and (max-width: 769px) { #page-title { transform: translateY(-30px); }} 
@media screen and (min-width: 770px) { #page-title { transform: translateY(10px); }} 

/* Pages 2 through 7 */ 

#page-title { transform: translateY(50%); } /* or below... */ 
@media screen and (min-width: 770px) { #page-title { transform: translateY(50%); }} 

Entsprechende HTML:

<div id="banner-area"> 
    <div id="page-title"> 

Ist dies der richtige Weg, um diese CSS-Regel schreiben vertikal zum Zentrieren, Oder kann jemand anderes eine bessere Lösung anbieten? Es nervt mich, dass Seite 1 ihre eigenen Regeln hat, bei denen der Rest mehr oder weniger identisch ist, um den Zentrierungseffekt zu erreichen. Etwas, das es mir erlauben würde, diesen Banner-Bereich-Padding-Hack loszuwerden, wäre großartig - ich brauche eine Einheitsgröße-Regel für mehrere Gerätebildschirmgrößen.

Danke!

Tyler

Answer 1

Ihre Frage ist ein wenig vage, und ohne entsprechende HTML und CSS können wir Ihnen keine Antwort geben Sie vielleicht. Allerdings, wenn ich das richtig verstehe, ist das, was Sie nach:

#page-title { 
    margin-top: 50%; 
    transform: translateY(-50%); 
} 

oder

parent { 
    position: relative; 
} 

#page-title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

Mit einem dem% der Größe des div anstelle der Größe der Eltern beziehen verwandeln.

Alternativ können Sie Flexbox auf dem übergeordneten Element verwenden:

parent { 
    display: flex; 
    align-itens: center; // Vertical 
    justify-content: center; // Horizontal 
} 

Wieder einmal ohne Kontext, welche dieser schwer zu sagen, ist die beste Lösung, wenn überhaupt.

Answer 2

Sie können diese wie folgt vor: HTML:

<div class="page-title"> 
    <h2>Page Title</h2> 
</div> 

Css:

.page-title{ 
    display: flex; 
    align-items:center; 
    background-color: #fafafa; 
    height: 300px; 
}