स्क्रीन के बीच में केंद्र div - यहां तक ​​कि जब पृष्ठ ऊपर/नीचे

Question

मेरे पृष्ठ में एक बटन है जो क्लिक किया गया है जब मेरी स्क्रीन के बीच में एक div (पॉपअप शैली) प्रदर्शित होता है।

मैं निम्नलिखित सीएसएस का उपयोग स्क्रीन के बीच में div को केंद्र में करने के लिए कर रहा हूं।

.PopupPanel 
{ 
    border: solid 1px black; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-color: white; 
    z-index: 100; 

    height: 400px; 
    margin-top: -200px; 

    width: 600px; 
    margin-left: -300px; 
} 

यह ठीक जब तक पृष्ठ नीचे स्क्रॉल नहीं है काम करता है ..

लेकिन अगर मैं अपने पृष्ठ के तल पर बटन जगह है और उस पर क्लिक करता है, div (शीर्ष पर प्रदर्शित होता उपयोगकर्ता को div की सामग्री देखने के लिए स्क्रॉल करना होगा)।

मैं जानना चाहता हूं कि स्क्रीन के बीच में div को कैसे प्रदर्शित किया जाए, चाहे उपयोगकर्ता ऊपर/नीचे स्क्रॉल हो।

Answer 1

position के बजाय fixed पर विशेषता बदलें।

Answer 2

बदलें position:absolute;position:fixed; उद्धरण के लिए

Answer 3

: मैं, कैसे स्क्रीन के बीच में div प्रदर्शित करने के लिए जानना चाहते उपयोगकर्ता/नीचे स्क्रॉल किया गया है या नहीं होगा।

बदलें

position: absolute; 

करने के लिए

position: fixed; 

---

position: absolute के लिए और position: fixed के लिए W3C विनिर्देशों।

Answer 4

मुझे बस स्क्रीन के बीच में एक बॉक्स को केन्द्रित करने के लिए एक नई चाल मिली है, भले ही आपके पास निश्चित आयाम न हों। मान लें कि आप 60% चौड़ाई/60% ऊंचाई बॉक्स चाहते हैं। इसे केंद्रित करने का तरीका 2 बक्से बनाकर है: एक "कंटेनर" बॉक्स जो बाईं ओर स्थित है: 50% शीर्ष: 50%, और रिवर्स स्थिति के साथ एक "टेक्स्ट" बॉक्स शेष: -50%; शीर्ष: -50%;

यह काम करता है और यह क्रॉस ब्राउज़र संगत है।

<div id="message"> 
    <div class="container"><div class="text"> 
     <h2>Warning</h2> 
     <p>The message</p> 
     <p class="close"><a href="#">Close Window</a></p> 
    </div></div> 
    <div class="bg"></div> 
</div> 

<style type="text/css"> 
html, body{ min-height: 100%; } 
#message{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; } 
#message .container{ height: 60%; left: 50%; position: absolute; top: 50%; z-index: 10; width: 60%; } 
#message .container .text{ background: #fff; height: 100%; left: -50%; position: absolute; top: -50%; width: 100%; } 
#message .bg{ background: rgba(0,0,0,0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; } 
</style> 

<script type="text/javascript"> 
jQuery('.close a, .bg', '#message').on('click', function(){ 
    jQuery('#message').fadeOut(); 
    return false; 
}); 
</script> 

Yay: नीचे कोड बाहर

चेक, तो आप शायद एक बेहतर explaination प्राप्त करें!

Answer 5

सही विधि

.PopupPanel 
{ 
    border: solid 1px black; 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    background-color: white; 
    z-index: 100; 
    height: 400px; 
    margin-top: -200px; 

    width: 600px; 
    margin-left: -300px; 
}