स्क्रीन के मध्य में एक '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कि स्क्रीन को बीच में कैसे प्रदर्शित किया जाए , तब भी जब पृष्ठ स्क्रॉल किया गया हो।

Comments

प्रश्न प्रश्न। आप मार्जिन-टॉप क्यों घटा रहे हैं: (200) और मार्जिन-लेफ्ट। मुझे लगता है कि यह ऊंचाई और चौड़ाई का माध्यम है, लेकिन हमें निरपेक्ष केंद्र पाने के लिए ऐसा क्यों करना होगा? छोड़ दिया नहीं होना चाहिए 50% और शीर्ष 50% चाल है?

— jmoon90

@ jmoon90 स्क्रीन के केंद्र के ऊपरी बाएं कोने को left: 50%; top: 50%ले जाता है । फिर हम इसे केंद्र में वापस चौड़ाई और ऊँचाई के आधे भाग पर ले जाते हैं। .PopupPanel

— Css-tricks.com

Answer 1

इसके बजाय positionविशेषता बदलें ।fixedabsolute

Comments

क्या होगा अगर आपको पॉप अप और स्क्रीन की तुलना में बड़े स्क्रॉल करने की आवश्यकता है?

— दरबार

ध्यान रखें कि यह सबसे उत्तरदायी समाधान नहीं है (लेकिन ऊपर की समस्या के लिए एक सही समाधान)। Getbootstrap.com/javascript/#modals की जाँच करें और अपने पॉपअप / मोडल्स के साथ काम करने के बारे में कुछ अच्छे विचार प्राप्त करने के लिए अपने DevTools के साथ देखें।

— कैस ब्लोम

Answer 2

बदलें position:absolute;करने के लिएposition:fixed;

Answer 3

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

परिवर्तन

position: absolute;

सेवा

position: fixed;

---

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

Answer 4

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

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

नीचे दिए गए कोड की जांच करें, आपको संभवतः बेहतर स्पष्टीकरण मिलेगा:

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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;
}