center h1 in der Mitte des Bildschirms

Question

Wie kann ich einen Text horizontal und vertikal zentrieren? Ich möchte nicht die absolute Position benutzen, weil ich es versuche und mein anderes DIV schlimmer wird. Gibt es einen anderen Weg, das zu tun?

div { 
 
    height: 400px; 
 
    width: 800px; 
 
    background: red; 
 
}

<div> 
 
    <h1>This is title</h1> 
 
</div> 
 

Answer 1

Sie Anzeige verwenden können flex einen Flex-Kontext für alle seine direkten Kinder ermöglicht, und mit Flex Richtung stellt die Hauptachse, so definiert die Richtung Flex Elemente in der Flex platziert Behälter

div{ 
    height: 400px; 
    width: 800px; 
    background: red; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
} 

Answer 2

dies nur tun, die auf jedem Browser funktioniert:

div{ 
    height: 400px; 
    width: 800px; 
    background: red; 
    line-height: 400px; 
    text-align: center; 
} 

Die Eigenschaft line-height gibt die Zeilenhöhe an (die sie vertikal zentriert) und text-align:center platziert sie direkt in der Mitte horizontal.

Answer 3

<div> 
    <style> 
div { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
}</style> 
<h1>This is title</h1> 
</div> 

Mit position: fixed legen Sie die Position auf einen festen Wert, und mit top und left beide auf 50% werden Sie es in der Mitte des Bildschirms bekommen.

Viel Glück Codierung!

Hier sind einige weitere Informationen: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 4

.container { 
 
    display: table; 
 
} 
 
.centered { 
 
    display: table-cell; 
 
     height: 400px; 
 
     width: 800px; 
 
     background: red; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    }

<div class="container"> 
 
<div class="centered"> 
 
    <h1>This is title</h1> 
 
</div> 
 
</div>