एक स्थिति केंद्र: निश्चित तत्व

439

मैं एक position: fixed;पॉपअप बॉक्स को डायनामिक चौड़ाई और ऊंचाई के साथ स्क्रीन पर केंद्रित करना चाहता हूं । मैंने इसके margin: 5% auto;लिए इस्तेमाल किया । इसके बिना position: fixed;यह क्षैतिज रूप से ठीक है, लेकिन लंबवत नहीं है। जोड़ने के बाद position: fixed;, यह क्षैतिज रूप से भी केंद्रित नहीं है।

यहां देखें पूरा सेट:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

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

मैं इस बॉक्स को CSS के साथ स्क्रीन में कैसे केंद्रित कर सकता हूं?

css css-position centering

— saturngod
स्रोत

606

आप मूल रूप से सेट करने की जरूरत है topऔर leftकरने के लिए 50%div के बाएं शीर्ष कोने केंद्रित करने के लिए। आप यह भी निर्धारित करने की आवश्यकता margin-topहै और margin-leftdiv की ऊंचाई और चौड़ाई के नकारात्मक आधा करने के लिए div के मध्य की ओर केंद्र शिफ्ट करने के लिए।

इस प्रकार, एक <!DOCTYPE html>(मानक मोड) प्रदान किया गया है , यह करना चाहिए:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

या, यदि आप खड़ी है और इस तरह IE6 / 7 के रूप में पुराने ब्राउज़र केंद्रित के बारे में परवाह नहीं है, तो आप के बजाय भी जोड़ सकते हैं left: 0और right: 0एक होने तत्व को margin-leftऔर margin-rightकी autoहै, ताकि तय तैनात तत्व एक निश्चित चौड़ाई होने जानता है, जहां अपने छोड़ दिया और राइट ऑफसेट शुरू। इस प्रकार आपके मामले में:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

फिर, यह केवल IE8 + में काम करता है यदि आप IE के बारे में परवाह करते हैं, और यह केंद्र केवल क्षैतिज रूप से लंबवत नहीं है।

— BalusC
स्रोत

8

मुझे वह ट्रिक css-tricks.com/… में मिली । लेकिन जब मैं चौड़ाई और ऊंचाई बदलता हूं, तो यह केंद्र नहीं होता है। हां, ऊंचाई और चौड़ाई बदलने पर मुझे मार्जिन-लेफ्ट और टॉप बदलना चाहिए।

— शनिश्चोद

2

FYI करें: यह चीजों को बीच में सही ढंग से स्थिति देगा, लेकिन दुर्भाग्य से आप अपनी स्क्रॉल-बार खो देते हैं - व्यूपोर्ट द्वारा बंद की गई कोई भी सामग्री अनुपलब्ध नहीं होगी, भले ही आप स्क्रॉल करें, क्योंकि निर्धारित स्थिति व्यूपोर्ट पर आधारित है, न कि पृष्ठ। अब तक, एकमात्र समाधान जो मैंने पाया है, वह जावास्क्रिप्ट के साथ है।

— ग्रॉक्सक्स

3

Groxx मुझे लगता है कि आप ओवरफ़्लो संपत्ति का उपयोग करके पॉप में एक div के अंदर स्क्रॉल बार रख सकते हैं ।

— डेविड विनीकी

1

इसके अलावा, इसके लिए आपको तत्व की चौड़ाई जानना आवश्यक है।

— हेक्टर ऑर्डोनेज़

2

आह। एनएम अगर यह मामला है, मैं निश्चित रूप से ब्राउज़र आकार गतिशील हो जाएगा, यकीन है कि क्यों सवाल में था नहीं है। इसके बजाय मुझे लगा कि उनका मतलब है कि पॉपअप आयामों को गतिशील होने की आवश्यकता है। मेरे लिए मामला इतना परिवर्तन का उपयोग कर im: अनुवाद (-50%, -50%); IE8 पर नहीं छोड़कर महान काम करता है।

— रात

324

मैं एक पॉपअप बॉक्स को गतिशील चौड़ाई और ऊंचाई के साथ स्क्रीन पर केंद्रित करना चाहता हूं।

यहां एक गतिशील चौड़ाई के साथ एक तत्व को क्षैतिज रूप से केंद्रित करने के लिए एक आधुनिक दृष्टिकोण है - यह सभी आधुनिक ब्राउज़रों में काम करता है; यहाँ समर्थन देखा जा सकता है ।

अपडेटेड उदाहरण

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

ऊर्ध्वाधर और क्षैतिज दोनों केंद्रों के लिए आप निम्नलिखित का उपयोग कर सकते हैं:

अपडेटेड उदाहरण

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

आप अधिक विक्रेता पूर्वनिर्मित गुणों में भी जोड़ना चाह सकते हैं (उदाहरण देखें)।

— जोश क्रोज़ियर
स्रोत

1

मैं इस दृष्टिकोण का उपयोग क्षैतिज रूप से एक निश्चित स्थान पर स्थित छवि केंद्र में कर रहा हूं, जिसकी चौड़ाई विंडो चौड़ाई से अधिक है और वर्तमान फ़ायरफ़ॉक्स, क्रोम, IE 11 और एज संस्करणों में कम से कम काम कर रहा है।

— जेलन

1

मेरे परीक्षण में यह बहुत अच्छा काम करता है (उपसर्गों के पीछे), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome। मेरे लिए केवल विफलता Android 4.0 थी जहां अनुवाद नहीं हुआ था।

— danjah

2

@ahnbizcad, यह क्रोम ब्राउजर जैसे क्रोम 61, सफारी 11 और फायरफॉक्स 65 में काम करता है, लेकिन एंड्रॉइड 6 पर क्रोम 61 में नहीं, सभी ब्राउज़र में स्वीकृत जवाब काम करता है।

— एरिक बर्क

5

इससे क्रोम में छवियां धुंधली हो जाती हैं।

— टॉमाज़ पी। स्ज़िनल्स्की

1

किसी तरह केवल वही दृष्टिकोण जो मेरे img के साथ सभी ब्राउज़र में उचित काम करता है। बहुत बहुत धन्यवाद!

— कुगफ्लिस्क

136

या बस जोड़ने left: 0और right: 0अपने मूल सीएसएस है, जो यह एक नियमित रूप से गैर निश्चित तत्व और हमेशा की तरह ऑटो मार्जिन तकनीक काम करता है के लिए समान व्यवहार करता है:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

ध्यान दें कि आपको DOCTYPEIE में सही व्यवहार करने के लिए एक वैध (X) HTML का उपयोग करने की आवश्यकता है (जो कि आपके पास वैसे भी होना चाहिए ..!)।

— प्रेस्कॉट करेगा
स्रोत

2

किस तरीके से? मूल तत्व शरीर तत्व है, जिसकी कोई सीमा नहीं है। यदि आपने बॉडी (!) में बॉर्डर प्रॉपर्टीज को जोड़ा है, तो यकीन है कि यह प्रभावित होगा, जैसा कि 50% तकनीक मैं कल्पना करता हूं। मैं आपको विश्वास दिलाता हूं कि यह दिए गए मापदंडों के साथ ठीक काम करता है, बस मेरे पास हर ब्राउज़र में सत्यापित है, और तत्व की चौड़ाई पर निर्भर नहीं होने का अतिरिक्त लाभ है।

— विल प्रेस्कॉट

5

मैंने केवल उन 2 गुणों को जोड़ा और ओपी के उदाहरण HTML के लिए एक सिद्धांत बनाया। हालांकि आगे के परीक्षण पर ऐसा लगता है कि IE7 (या कॉम्पिटिटर मोड में 8) समस्या है - ऐसा लगता है कि यह rightसंपत्ति के मूल्य का सम्मान नहीं करता है यदि leftयह भी सेट है! ( msdn.microsoft.com/en-us/library/… ध्यान दें कि leftऔर rightकेवल IE7 में "आंशिक" समर्थन है। ठीक है, मैं मानता हूं कि यह समाधान अच्छा नहीं है अगर IE7 समर्थन महत्वपूर्ण है, लेकिन भविष्य के लिए याद रखने के लिए एक महान चाल :)

— करेगा

7

यह स्वीकृत उत्तर होना चाहिए। मैं मोडल के लिए अपारदर्शिता मुखौटा दूसरे के लिए दो निश्चित पदों में से एक था। यह एकमात्र तरीका था जो मैं स्क्रीन के केंद्र में निश्चित स्थिति मोडल को केंद्र में रख सकता था। बहुत बढ़िया जवाब, किसने सोचा होगा?

— क्रिस हॉक्स

3

मैं सहमत हूं, यह स्वीकृत उत्तर होना चाहिए। यह उत्तरदायी डिजाइन में पूरी तरह से काम करता है, भी, क्योंकि यह चौड़ाई पर निर्भर नहीं है।

— हेक्टर ऑर्डोनेज़

7

मैं उत्तर को सरल बनाने के लिए सुझाव दूंगा, क्योंकि कुछ सीएसएस केवल ओपी के लिए प्रासंगिक हैं। आप सभी की जरूरत स्थिति है: तय; बायां: 0; सही: 0; मार्जिन: 0 ऑटो; ।

— हेक्टर ऑर्डोनेज़

23

एक कंटेनर जोड़ें:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

फिर अपना डिब्बी इस डिव में डाल दो कि वह काम करेगा।

— रोमुलस उरावगी त्सै
स्रोत

"text-align: center" आंतरिक div को केंद्रित करने में मेरे लिए काम नहीं किया।

— नीमा

2

display: inline-blockकाम करने के लिए आंतरिक बॉक्स का होना आवश्यक है। (कुछ अन्य प्रदर्शन मूल्य भी काम कर सकते हैं, जैसे कि table।)

— ब्रिलियनड

जैसा कि ऊपर उल्लेख सीएसएस के लिए एक बेहतर दृष्टिकोण जोड़ने होगा margin:auto;और करने के लिए चौड़ाई को बदलने width:50%या width:400px। तब सामग्री सीधे पाठ, ब्लॉक तत्व या इनलाइन तत्व हो सकते हैं।

— यहोशू बर्न्स

20

बस जोड़ दो:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

— बॉब
स्रोत

1

यह साथ काम नहीं करता है position: fixed, जो प्रश्न के बारे में है। अगर मैं गलत हूं, तो कृपया एक रन कोडेबल स्निपेट शामिल करने के लिए अपने उत्तर को संपादित करें।

— फ्लिम

1

यह निश्चित स्थिति के साथ बढ़िया काम करता है।

— फुहुई

1

यह काम करता है position: fixed, बशर्ते max-widthया widthतत्व को सेट करें ।

— जेएस लिम

7

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

इसके अंदर डिफनेट चौड़ाई, ऊंचाई या बिना किसी भी तत्व के हो सकता है। सभी केन्द्रित हैं।

— praffessorr
स्रोत

5

इस समाधान के लिए आपको अपने पॉपअप div की चौड़ाई और ऊंचाई को परिभाषित करने की आवश्यकता नहीं है।

http://jsfiddle.net/4Ly4B/33/

और पॉपअप के आकार की गणना करने के बजाय, और शीर्ष पर माइनस आधा, जावास्क्रिप्ट पूरी स्क्रीन को भरने के लिए पॉपअपकंटेनर का आकार बदल रहा है ...

(100% ऊंचाई, प्रदर्शन का उपयोग करते समय काम नहीं करता है: टेबल-सेल; (जो लंबवत कुछ केंद्र के लिए आवश्यक है) ...

वैसे भी यह काम करता है :)

— BjarkeCK
स्रोत

4

left: 0;
right: 0;

IE7 के तहत काम नहीं कर रहा था।

में परिवर्तित किया गया

left:auto;
right:auto;

काम करना शुरू कर दिया लेकिन बाकी ब्राउज़रों में यह काम करना बंद कर देता है! तो नीचे IE7 के लिए इस तरह से इस्तेमाल किया

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

— जतिन्दर
स्रोत

क्या आपको संपूर्ण समाधान को शामिल करने के लिए अपने उत्तर को संपादित करने का मन है?

— फ्लि‍म

यह बाईं और दाईं ओर एक ऑटो मार्जिन के बिना काम नहीं करेगा।

— RoM4iK

2

आप मूल रूप से इसे दूसरे में लपेट सकते हैं divऔर इसके सेट कर positionसकते हैं fixed।

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}

<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

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

— अब्दुल्ला दिलशाद
स्रोत

2

मैंने vw(व्यूपोर्ट चौड़ाई) और vh(व्यूपोर्ट ऊंचाई) का उपयोग किया। व्यूपोर्ट आपकी पूरी स्क्रीन है। 100vwआपकी स्क्रीन कुल चौड़ाई है और 100vhकुल ऊंचाई है।

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

— असीम
स्रोत

1

स्थिति का उपयोग कर इसे ठीक करने के लिए:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

— HeadAndTail
स्रोत

3

कृपया इस बारे में स्पष्टीकरण दें कि आपका समाधान पोस्ट किए गए प्रश्न के लिए क्यों काम करेगा।

— शेखर चिकारा

0

एक संभावित उत्तर :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

— मार्टिन वाही
स्रोत

यह काम करने लगता है, हालांकि इसके लिए आपको पहले से ही तत्व की चौड़ाई और ऊंचाई का पता होना चाहिए।

— फ्लिम्म

0

क्षैतिज तत्वों के लिए इसका उपयोग करने का प्रयास करें जो सही ढंग से केंद्र में नहीं होंगे।

चौड़ाई: कैल्क (चौड़ाई: 100% - चौड़ाई जो भी हो, उसे बंद करने के लिए )

उदाहरण के लिए यदि आपका साइड नेविगेशन बार 200px है:

width: calc(100% - 200px);

— रॉबर्ट रॉस
स्रोत

0

मैं बस कुछ इस तरह का उपयोग करें:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

यह मेरे लिए क्षैतिज और लंबवत दोनों तरह से संवाद बॉक्स को केंद्र में रखता है, और मीडिया प्रश्नों के साथ, इसे उत्तरदायी बनाने के लिए विभिन्न स्क्रीन रिज़ॉल्यूशन को फिट करने के लिए मैं अलग-अलग चौड़ाई और ऊंचाई का उपयोग कर सकता हूं।

यदि आपको अभी भी उन ब्राउज़र के लिए समर्थन प्रदान करने की आवश्यकता नहीं है जहाँ CSS कस्टम गुण या calc()समर्थित नहीं हैं (caniuse पर जाँच करें)।

— फेबियन सन्नुवर्ट
स्रोत

0

इसने मेरे लिए सबसे अच्छा काम किया:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

— Flafy
स्रोत

-13

एकमात्र अचूक उपाय तालिका संरेखण = केंद्र का उपयोग करना है:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

मुझे विश्वास नहीं हो सकता है कि दुनिया भर के लोग एक दिव्यांगता जैसी मूलभूत समस्या को हल करने के लिए इन प्रचुर मात्रा में मूर्खतापूर्ण समय को बर्बाद कर रहे हैं। सीएसएस समाधान सभी ब्राउज़रों के लिए काम नहीं करता है, jquery समाधान एक सॉफ्टवेयर कम्प्यूटेशनल समाधान है और अन्य कारणों के लिए एक विकल्प नहीं है।

मैंने तालिका का उपयोग करने से बचने के लिए बार-बार बहुत समय बर्बाद किया है, लेकिन अनुभव मुझे बताता है कि इसे लड़ना बंद करो। डिव केंद्रित करने के लिए तालिका का उपयोग करें। सभी ब्राउज़रों में हर समय काम करता है! कभी कोई चिंता न करें।

— चियांग
स्रोत

11

इस सवाल का जवाब बिल्कुल नहीं है। इसके बराबर कोई गैर-सीएसएस नहीं है position:fixed।

— ब्रिलियन्ड