कैसे खड़ी flexbox

Question

के साथ पृष्ठ पर div संरेखित करने के लिए निम्नलिखित खड़ी ब्राउज़र टैब में पाठ के साथ div (यह क्षैतिज सही ढंग से संरेखित है) संरेखित नहीं है:

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

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

 
</div>

क्या गलत है?

Answer 1

समस्या पैरेंट कंटेनर को दी गई ऊंचाई के साथ है। height :100% पूरी ऊंचाई नहीं लेता है। 100vh करने के लिए बदल कि या कि

यहाँ की तरह अद्यतन किया जाता है 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

इस प्रयास करें:

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

ऐसा इसलिए है क्योंकि आपके माता-पिता div पूर्ण ऊंचाई नहीं लेते हैं।

Answer 3

कोशिश इस

<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

कृपया bellow कोड

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>