आईई 11 और आईई 10

Question

में फ्लेक्सबॉक्स के साथ लंबवत संरेखण एक क्रॉस ब्राउज़र समाधान कैसे बनाएं जहां एक तत्व ऊर्ध्वाधर गठबंधन है?

http://jsfiddle.net/e2yuqtdt/3/

यह दोनों फ़ायरफ़ॉक्स और क्रोम में काम करता है, लेकिन नहीं IE11

में

<div class="page_login"> 
    <div>vertical-align:center; text-align:center</div> 
</div> 

html, body { 
    height:100%; 
} 

.page_login { 
    display:flex; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

.page_login > div { 
    margin:auto; 
    background:#fff; 
    min-height:100px; 
    width:200px; 
} 

अद्यतन

जब केंद्रित तत्व व्यूपोर्ट ऊंचाई से अधिक है पृष्ठभूमि केवल 100% है और 100% स्क्रॉल ऊंचाई नहीं

http://jsfiddle.net/e2yuqtdt/8/

html, body { 
    min-height:100%; 
    height:100%; 
} 

.page_login { 
    display:flex; 
    min-height:100%; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

.page_login > div { 
    margin:auto; 
    background:#fff; 
    height:800px; 
    width:200px; 
} 

Answer 1

एक क्रॉस ब्राउज़र समाधान कैसे बनाएं जहां एक तत्व लंबवत है गठबंधन?

इस बेला पर एक नज़र डालें: http://jsfiddle.net/5ry8vqkL/

तकनीक लागू किया वहाँ उपयोग कर रहा है "प्रदर्शन: तालिका"। http://caniuse.com/#search=table-cell

एचटीएमएल:

<div class="container"> 
    <div id="page-login"> 
     <div class="panel">Some content</div> 
    </div> 
</div> 

सीएसएस:

html, body { 
    min-height:100%; 
    height:100%; 
} 

.container { 
    display: table; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

#page-login { 
    display: table-cell; 
    vertical-align: middle 
} 

.panel { 
    height: 100px; 
    background-color: #fff; 
} 

Answer 2

आपको div में ऊंचाई जोड़ने की आवश्यकता है। जैसा कि आपने केवल न्यूनतम ऊंचाई निर्दिष्ट की है, आईई स्वचालित रूप से इसे अधिकतम संभव तक फैलाता है। तो, एक ऊंचाई जोड़ने के इस तरह:

.page_login > div { 
    margin:auto; 
    background:#fff; 
    min-height:100px; 
    width:200px; 
    height:200px; 
} 

http://jsfiddle.net/e2yuqtdt/6/

यह एक फ्लेक्स बॉक्स है, और इसलिए फ्लेक्स के लिए, एक अच्छा विचार ऊंचाई एक प्रतिशत बनाने के लिए हो सकता है का मतलब है। तो div ऊंचाई होगी - उदाहरण के लिए - पृष्ठ की ऊंचाई का 50%, जब तक कि पृष्ठ 200px से कम न हो - तब यह 100px अधिक होगा।

अद्यतन: दुर्भाग्य से div को पूरे पृष्ठ को केवल सीएसएस के साथ भरना संभव नहीं है। हालांकि ऐसा लगता है यह जावास्क्रिप्ट के साथ संभव है, यहाँ देख Make a div fill the height of the remaining screen space

असल - टेबल divs

http://jsfiddle.net/e2yuqtdt/14/

<div> 
    <div id="div1"> 
     <div id="div2">vertical-align:center; text-align:center</div> 
    </div> 
</div> 


#div1 { 
    display:flex; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

#div2 { 
    margin:auto; 
    background:#fff; 
    height:800px; 
    width:200px; 
} 

मैं जानता हूँ कि इस अद्यतन Elad द्वारा एक के बाद आ रहा है का उपयोग कर इसे हासिल किया है .chen - लेकिन पहले ही यह कर चुका था और इसे नीचे टिप्पणी में पोस्ट किया था - सवाल को अद्यतन करने के लिए बस गोल नहीं मिला था।