Wie vertikal ausrichten div auf Seite mit Flexbox

Question

Das Folgende ist nicht vertikal, um die div mit Text in Browser-Tab Ausrichtung (horizontal ausrichtet richtig):

<div style="height: 100%; display: flex; align-items: center; justify-content: center;"> 
 

 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 

 
</div>

Was ist falsch?

Answer 1

Das Problem liegt in der Höhe, die Sie dem übergeordneten Container zugewiesen haben. Die height :100% nimmt nicht ganze Höhe. ändern, dass zu 100vh oder wie die

Hier wird die aktualisierte Demo

.container{ 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie folgendes:

<div style="height: 100vh; display: flex; align-items: center; justify-content: center;"> 
 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 
</div>

Es ist, weil Ihr Elternteil div nicht die volle Höhe nimmt.

Answer 3

versuchen diese

<div style="height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: lightgrey;"> 
 

 
    <div> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 

 
</div>

Answer 4

unten Bitte versuchen Sie folgenden Code

body, html{ 
 
    height:100%; 
 
    width:100%; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 

 
.demo-wp{ 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background:green; 
 
    height:100%; 
 
} 
 

 
.inner-div{ 
 
    background:gold; 
 
    padding:20px; 
 
}

<div class="demo-wp"> 
 

 
    <div class="inner-div"> 
 
    Some vertical and horizontal aligned text 
 
    </div> 
 

 
</div>