स्क्रीन के केंद्र में पोजिशनिंग <div> तत्व

134

मैं स्क्रीन के आकार के बावजूद स्क्रीन के केंद्र में एक <div>(या <table>) तत्व रखना चाहता हूं । दूसरे शब्दों में, 'शीर्ष' और 'बॉटम' पर छोड़ा गया स्पेस समान होना चाहिए और 'राइट' और 'लेफ्ट' पक्षों पर स्पेस बराबर होना चाहिए। मैं इसे केवल CSS के साथ पूरा करना चाहूंगा।

मैंने निम्नलिखित कोशिश की है, लेकिन यह काम नहीं कर रहा है:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

नोट:
यह या तो ठीक है अगर <div>तत्व (या <table>) वेबसाइट के साथ स्क्रॉल करता है या नहीं। पृष्ठ लोड होने पर बस इसे केंद्रित करना चाहते हैं।

javascript css html

— सुमित
स्रोत

1

पेज के मध्य में एक <div> संरेखित करने के तरीके के

— Purag

हाय पुरमौ, आपके द्वारा उल्लिखित प्रश्न यदि पृष्ठ के मध्य में स्थिति के लिए है, अर्थात बाईं और दाईं ओर बराबर स्थान - ऊपर और नीचे का स्थान समान नहीं है!

— सुमित

1

के संभावित डुप्लिकेट क्या सीएसएस के साथ एक डिव खड़ी केंद्रित का सबसे अच्छा तरीका है

— outis

कैसे एक div में एक केंद्र को केंद्र में रखना

— bjb568

201

आसान तरीका, यदि आपके पास एक निश्चित चौड़ाई और ऊंचाई है:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

कृपया इनलाइन शैलियों का उपयोग न करें! यहाँ एक काम कर उदाहरण http://jsfiddle.net/S5bKq/ है ।

— आइंस्टाइन
स्रोत

13

गतिशील ऊंचाई चाहने वालों के लिए: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 इनलाइन शैलियों का उपयोग क्यों नहीं करते? प्रसिद्ध कारणों के लिए या क्या कुछ और है जो मुझे विशिष्ट उदाहरण के लिए जानना चाहिए?

— Sharky

@KatrinRaimond यह अच्छी तरह से ज्ञात कारणों के लिए है, यहाँ दस्तावेज stackoverflow.com/questions/2612483/… और यहाँ webdesign.about.com/od/css/a/aa073106.htm है ।

— एलेक्स

लेकिन, divElement के टॉप को '%' यूनिट में सेट करने से divElement वर्टिकल स्पेस लेता है जब तक कि divElement को किसी रिलेटिव एलिमेंट के अंदर नहीं रखा जाता।

— सिपिप

स्थिति है: निश्चित या स्थिति: निरपेक्ष?

— कुरकुला

151

इन दिनों अधिक सर्वव्यापी रूप से समर्थित होने के कारण, आप पॉपअप की चौड़ाई / ऊँचाई को जाने बिना भी ऐसा कर सकते हैं

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

आसान! यहाँ JSFiddle: http://jsfiddle.net/LgSZV/

अपडेट: की जाँच करें https://css-tricks.com/centering-css-complete-guide/ सीएसएस केंद्रित पर एक काफी व्यापक गाइड के लिए। इस जवाब में इसे जोड़ने के लिए क्योंकि यह बहुत सारे नेत्रगोलक लगता है।

— XwipeoutX
स्रोत

1

यदि पॉपअप में सामग्री का उपयोग किया जाता है overflow:auto, तो IE9 में स्क्रॉलिंग को खराब कर दिया जाता है। :(

— joescii

2

इतना ubiquos नहीं। IE8 ब्राउज़र के 20% हिस्से को साझा करता है और इसका समर्थन नहीं करता है । तो केवल IE9 + के लिए इसे लें।

— फोटोनस

7

+1 एकमात्र समाधान होने के लिए जहां आपको ऊंचाई और चौड़ाई निर्दिष्ट करने या जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है।

— Jan Derk

@fotanus जब डेवलपर्स IE 9 का समर्थन करना बंद कर देते हैं <तो उपयोगकर्ता अपने ब्राउज़र को माइग्रेट या अपडेट करेंगे।

— डिएगो विएरा

@DIeVieira यह दुर्भाग्य से नहीं है कि चीजें कैसे काम करती हैं। कॉमन्स की त्रासदी देखें । इसलिए लोग IE8 का समर्थन करना जारी रखेंगे क्योंकि इस शेयर को खोना नहीं चाहते हैं, और लोग इसका उपयोग करना जारी रखेंगे क्योंकि यह काम करता है।

— फॉटनस

33

चौड़ाई और ऊंचाई सेट करें और आप अच्छे हैं।

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

यदि आप चाहते हैं कि तत्व आयाम लचीले हों (और विरासत ब्राउज़र की परवाह न करें), तो XwipeoutX के उत्तर के साथ जाएं ।

— एरिक Aigner
स्रोत

1

यह सबसे साफ और सरल उत्तर है और मोबाइल के अनुकूल भी है। +1

— जंग

22

यह किसी भी वस्तु के लिए काम करेगा। भले ही आप आकार नहीं जानते:

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

— luminousmen
स्रोत

17

अब, HTML 5 और CSS 3 के साथ अधिक आसान है:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— डैनियल डी लियोन
स्रोत

12

यदि आपके पास एक निश्चित divपूर्ण स्थिति है तो इसे शीर्ष से 50% और बाएं से 50% और ऋणात्मक मार्जिन से ऊपर और आधी ऊंचाई और चौड़ाई के क्रमशः छोड़ दिया है। अपनी आवश्यकताओं के लिए समायोजित करें:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
स्रोत

9

फ्लेक्स का उपयोग करें । बहुत सरल और आपके divआकार की परवाह किए बिना काम करेगा :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

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

— Caner
स्रोत

3

मैं CSS में ऐसा करूंगा:

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

फिर HTML में:

<div class="centered"></div>

— एडुआर्डो लागो एगुइलर
स्रोत

0

इसे इस्तेमाल करे

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

या यह

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— डाली
स्रोत

0

यदि कोई समाधान की तलाश में हैं,

मुझे मिला,

इसका सबसे अच्छा समाधान मुझे अभी तक मिला है!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

उम्मीद करता हु आपको आनंद मिला हो!

— क्रिस्टोफर एटवुड
स्रोत

0

केंद्र में ब्लॉक प्रदर्शित करने के लिए एक और आसान लचीला दृष्टिकोण: मूल पाठ संरेखण के साथ line-heightऔर का उपयोग करना text-align।

उपाय:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

और html नमूना:

<div class="parent">
  <div class="child">My center block</div>
</div>

हम div.parentफुलस्क्रीन बनाते हैं , और उसका एकल बच्चा div.childपाठ के साथ संरेखित करता है display: inline-block।

लाभ:

लचीलापन, कोई पूर्ण मूल्य नहीं
समर्थन का आकार बदलें
मोबाइल पर ठीक काम करता है

JSFiddle पर सरल उदाहरण: https://jsfiddle.net/k9u6ma8g

— पावेल शोरोखोव
स्रोत

0

वैकल्पिक समाधान जो स्थिति निरपेक्ष का उपयोग नहीं करता है:
मुझे बहुत अधिक स्थिति पूर्ण उत्तर दिखाई देती है। मैं किसी और चीज़ को तोड़े बिना स्थिति का उपयोग नहीं कर सकता। तो उन लोगों के लिए जो यहाँ भी नहीं कर सकते, मैंने क्या किया है:
https://stackoverflow.com/a/58622840/6546317 (किसी अन्य प्रश्न के जवाब में पोस्ट किया गया)।

समाधान केवल ऊर्ध्वाधर रूप से केंद्रित होने पर केंद्रित है क्योंकि मेरे बच्चे तत्व पहले से ही क्षैतिज रूप से केंद्रित थे लेकिन यदि आप क्षैतिज रूप से उन्हें दूसरे तरीके से केंद्र नहीं कर सकते हैं तो इसे लागू किया जा सकता है।

— reddtoric
स्रोत

-2

इसे इस्तेमाल करे:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
स्रोत

2

यह प्रभावी रूप से स्वीकृत उत्तर के रूप में समान है

— Apaul

हाँ, लेकिन यहाँ मैं मार्जिन टॉप और लेफ्ट के संचालन की व्याख्या करता हूँ ... किसी को यह पता नहीं है ....

— user3423956

1

फिर यह प्रभावी रूप से दूसरे उत्तर के

— Apaul