Mit Text-Center und ausgerichtet auf der Seite, egal was die Größe des Browser-

Question

ist

ich den Tag <h1> in HTML verwenden und ich versuche, den Text in der Mitte der Webseite zu setzen, egal wie viel Sie ändern die Größe der Webseite. Im Grunde genommen, so ist der Text als Reaktion auf die Größe der Webseite als auch. Hier ist, was ich meine:

In meiner CSS-Seite habe ich versucht, die folgendes zu tun:

h1 { 
text-align: center; 
display: table-cell; 
vertical-align: middle; 
} 

Dies ist jedoch nicht funktionierte. Wie würde ich das tun?

Answer 1

Sie können, dass mehrere Arten tun, zwei häufigsten sind mit der Positionierung und Flexbox:

Positionierung:

body { 
 
    position: relative; /* usually the parent, in this case the body element, has position relative so that the absolute positioned child is positioned relative to it */ 
 
    height: 100vh; /* 100% of the viewport height */ 
 
    margin: 0; /* recommended */ 
 
} 
 

 
h1 { 
 
position: absolute; /* taken out of the normal flow of the document */ 
 
top: 50%; /* moved down by 50% of the screen height */ 
 
transform: translateY(-50%); /* moved back up (Y axis) by half of its height to achieve the perfect center */ 
 
width: 100%; /* needs to be defined to keep the default block behavior */ 
 
text-align: center; 
 
margin: 0; /* again, for perfect center */ 
 
}

<h1>This is center aligned text</h1>

Flexbox:

body { /* or any other parent element */ 
 
    display: flex; /* flex behavior (displays children inline) */ 
 
    justify-content: center; /* horizontal centering */ 
 
    align-items: center; /* vertical centering */ 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    text-align: center; /* comes in handy when resizing the browser width, if the text is long/big enough */ 
 
}

<h1>This is center aligned text</h1>

Answer 2

Genau dies versuchen:

body{ 
     position:relative; 
    } 

    h1{ 
     position:absolute; 
     width: /*your desired width*/ 
     top:0; 
     bottom:0; 
     left:0; 
     right:0; 
     margin:auto auto; 
     text-align:center; 
    } 

Hinweis: Elternklasse immer relativ sein, wenn Sie absolute Kind-Klasse verwenden.

Answer 3

Als Tabellenzelle, wie Sie versucht, funktioniert aber es ist die Verpackung nicht das h1 das Element ein "table-cell", so die h1 vertikal zentriert werden kann gemacht werden Mitte. Zu dieser Zelle macht den gesamten Bildschirm bedecken Sie 100vh Höhe und Breite 100wv verwenden können ... oder Feststellung der 4 Ecken zu zwingen, indem es den gesamten Bildschirm zu bedecken (top; 0, links: 0, rechts: 0, unten: 0 ;).