जब पृष्ठ स्क्रीन से बड़ा होता है, तो स्क्रीन के बीच में एक स्थिति कैसे स्थापित करें

141

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

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

हालाँकि इसके साथ समस्या यह है कि यह पृष्ठ के बीच में आइटम को रखता है न कि स्क्रीन के बीच में। इसलिए यदि पृष्ठ कुछ स्क्रीन ऊंचा है और मैं पृष्ठ के शीर्ष पर हूं (भाग का शीर्ष भाग स्क्रीन पर प्रदर्शित होता है) जब मैं डिव बनाता हूं तो यह प्रकट होता है कि यह स्क्रीन पर भी नहीं है। इसे देखने के लिए आपको नीचे स्क्रॉल करना होगा।

क्या कोई मुझे बता सकता है कि आप स्क्रीन के बीच में कैसे दिखाई देंगे?

— कोडर २
स्रोत

मैंने सिर्फ एक परीक्षण पृष्ठ पर उस सटीक कोड का परीक्षण किया और यह पृष्ठ पर पूरी तरह से div को केंद्रित कर दिया, यहां तक कि लगभग 100 <br />से पहले इसे आज़माने और नीचे धकेलने के लिए। हो सकता है कि अपने बाकी कोड को देखने की कोशिश करें कि क्या आपके पास ऐसा कुछ है जो या तो डीआईवी के मूल्यों को ओवर राइट कर रहा है या जो इन मुद्दों को पैदा करने के लिए आपके डीआईवी को प्रभावित कर रहा है।

— एली

269

बस जोड़ें position:fixedऔर इसे नीचे स्क्रॉल करने पर भी ध्यान में रखेंगे। इसे http://jsfiddle.net/XEUbc/1/ पर देखें

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— हुसैन
स्रोत

1

आप जीवन रक्षक हैं .. सरल समाधान भी अच्छी तरह से काम करता है भले ही तत्व में परिवर्तन पैमाने पर लागू हो ..

— Vinnie

91

मुझे लगता है कि यह एक सरल उपाय है:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

स्निपेट का विस्तार करें

— user2684935
स्रोत

7

यह दृष्टिकोण स्वीकृत उत्तर की तुलना में कहीं अधिक बेहतर है

— वायाचेस्लाव डोब्रोमाइसलोव

2

यह एक प्यार करता था, लेकिन क्या यह "पुराने" ब्राउज़र में काम करता है?

— बर्नमैरिएनो

14

परिवर्तन का उपयोग करें;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

जावास्क्रिप्ट समाधान:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— एरडोगन
स्रोत

5

रख दो margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

इसको आजमाओ।

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— चंदन शर्मा
स्रोत

1

मुझे लगता है कि यह एक और उपयोगी है 'क्यूज आपको मूल तत्व के लिए किसी भी शैली को लागू करने की आवश्यकता नहीं है।

— 7:11 बजे कैनबक्स

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

इसने मेरे लिए काम किया

— अब्राहम
स्रोत

2

हालांकि यह तकनीकी रूप से सही हो सकता है, आप एक संक्षिप्त विवरण शामिल करना चाहते हैं कि यह संदर्भ के लिए समस्या क्यों हल करता है

— drneel

2

लघु उत्तर, बस जोड़ें position:fixedऔर वह आपकी समस्या का समाधान करेगा

— पार्थ
स्रोत

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— मैत्रेय मालवे
स्रोत

साक्षात्कार में मुझसे सवाल पूछा गया था "आप स्क्रीन के div केंद्र को कैसे संरेखित करते हैं?"

— मैत्रेय मालवे

1

खैर, नीचे इसके लिए काम करने का उदाहरण है।

यदि आप वेबपृष्ठ का आकार परिवर्तन करते हैं या किसी भी आकार में लोड करते हैं तो यह केंद्र की स्थिति को संभाल लेगा।

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

स्निपेट का विस्तार करें

ऊपर के नमूने में लोडिंग डिव हमेशा केंद्र में होगा।

उम्मीद है कि यह आपकी मदद करेगा :)

— विकाश पांडे
स्रोत

1

स्क्रीन या उसके मूल टैग के बीच में टैग लगाने के दो तरीके:

पदों का उपयोग:

पैरेंट टैग सेट positionकरने के लिए relative(यदि लक्ष्य टैग एक माता पिता टैग है) और फिर इस तरह लक्ष्य टैग शैली सेट:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

फ्लेक्स का उपयोग करना:

मूल टैग शैली इस प्रकार दिखनी चाहिए:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— एलेक्स जोलीग
स्रोत

0

उर स्क्रिप्ट पृष्ठ में ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Div में एक मध्यम-वर्ग का उपयोग करें ...

   <div class="a-middle">

— एंटनी जैक
स्रोत

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

स्निपेट का विस्तार करें

— लीन्ज मिन्ह
स्रोत

-1

फ्लेक्स का उपयोग करना

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— एएसआईआरएस आरएजेए एम
स्रोत

यह सामग्री मूल तत्व या पृष्ठ पर केंद्रित है, न कि स्क्रीन पर।

— सीन

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— Lukash
स्रोत

कुछ स्पष्टीकरण जोड़ें

— पंकज मकवाना

-4

इसके लिए आपको स्क्रीन साइज का पता लगाना होगा। यह सीएसएस या HTML के साथ संभव नहीं है; आपको जावास्क्रिप्ट की आवश्यकता है। यहाँ खिड़की गुणों पर मोज़िला डेवलपर केंद्र प्रविष्टि https://developer.mozilla.org/en/DOM/window#_perties है

उसके अनुसार उपलब्ध ऊँचाई और स्थिति का पता लगाएँ।

— स्कॉट रेडक्लिफ
स्रोत