व्यूपोर्ट के भीतर एचटीएमएल तत्व को लंबवत और क्षैतिज रूप से केन्द्रित करने का सबसे अच्छा तरीका क्या है?

Question

मान लें कि मैं पॉपअप संदेश के रूप में उपयोग के लिए अपने व्यूपोर्ट के केंद्र में एक तत्व रखना चाहता हूं। यह पूरा करना चाहिए निम्नलिखित:

• तत्व (दोनों क्षैतिज और खड़ी) ब्राउज़र के भीतर केंद्रित रहना चाहिए, भले ही तत्व आकार गतिशील रूप से बदलता है
• तत्व केन्द्रित रहने यदि ब्राउज़र का आकार बदलने पर
• कोई Javascript अनुमति दी है चाहिए
• अभी भी IE7 पर काम करेंगे

वहाँ नीचे दी गई तालिका के आधार पर समाधान का सहारा के बिना इस को प्राप्त करने का एक अच्छा तरीका है?

<table style="position:absolute;width:100%;height:100%"> 
    <tr> 
     <td align="center"> 
      <span id="centeredContent">I always remain centered</span> 
     </td> 
    </tr> 
</table> 

Answer 1

सबसे अच्छा समाधान (मेरी राय में) पूर्ण स्थिति का उपयोग करने के 50 में तत्व के ऊपर बाईं जगह है %/50%, फिर नकारात्मक मार्जिन का उपयोग कर तत्व को केंद्र में वापस लाएं। एकमात्र कमी यह है कि आपको तत्व की चौड़ाई और ऊंचाई निर्दिष्ट करना है।यहाँ एक उदाहरण है:

HTML:

​<div id="centerme"> 
    Hello, world! 
</div>​ 

सीएसएस: http://jsfiddle.net/UGm2V/

---

तुम सच में केंद्रित सामग्री की आवश्यकता होती है एक के लिए:

​#centerme 
{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 

    /* You must set a size manually */ 
    width: 100px; 
    height: 50px; 

    /* Set negative margins equal to half the size */ 
    margin-left​: -50px; 
    margin-top: -25px; 

    background-color: cornflowerblue; 
} 

यहाँ jsfiddle पर एक प्रदर्शन है गतिशील ऊंचाई, एक और अधिक उन्नत समाधान है। सावधान रहें कि यह पुराने आईई ब्राउज़र में काम नहीं करेगा। एचटीएमएल निम्नानुसार है:

<div id="outter-container"> 
    <div id="inner-container"> 
     <div id="centred"> 
      <p>I have a dynamic height!</p> 
      <p>Sup!</p> 
     </div>   
    </div> 
</div> 

बाहरी कंटेनर को पृष्ठ की चौड़ाई और ऊंचाई को कवर करने की आवश्यकता है। यह पूर्ण स्थिति के साथ एक ब्लॉक तत्व है।
आंतरिक कंटेनर वास्तव में एक टेबल है! यह display: table सीएसएस संपत्ति द्वारा तय किया गया है। यहां जीत यह है कि आपको वास्तव में किसी भी तालिका HTML की आवश्यकता नहीं है।
# केंद्रित div अंतिम आवश्यक तत्व है। इसमें अभी भी पृष्ठ की चौड़ाई और ऊंचाई का 100% शामिल है, लेकिन इसके अंदर रखी गई कुछ भी लंबवत और क्षैतिज रूप से केंद्रित होगी। यह सीएसएस की जरूरत है, स्पष्टीकरण के साथ है:

/* 
An outter container is needed because the table 
won't cover the page width and height on it's own 
*/ 
#outter-container 
{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
} 

/* 
The inner container is a table which is set to 
cover the width and height of the page. 
*/ 
#inner-container 
{ 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

/* 
This table cell will cover 100% of the page width 
and height, but everything placed inside it will 
be placed in the absolute centre. 
*/ 
#centred 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

और बेशक, यहां इसके साथ जाने के लिए एक jsfiddle प्रदर्शन है: http://jsfiddle.net/N7ZAr/3/

Answer 2

http://milov.nl/code/css/verticalcenter.html जांच स्रोत कोड

Answer 3

सही केंद्रित/बाईं के लिए

, आप तत्व के लिए एक चौड़ाई निर्दिष्ट और "ऑटो" करने के लिए छोड़ दिया और सही मार्जिन सेट कर सकते हैं।

ऊर्ध्वाधर केंद्र के लिए, यह थोड़ा सा ट्रिकियर है। आप प्रतिशत ऊंचाई का उपयोग कर सकते हैं, लेकिन शरीर की ऊंचाई 100% निर्धारित करने के लिए याद रखें या यह काम नहीं करेगा।

पता नहीं है कि यह आईई 7 में काम करता है, क्षमा करें।

Answer 4

यदि यह एक निश्चित आकार तत्व है, तो आप कुछ इस तरह कर सकते हैं:

#centered { 
    position:absolute; 
    width:200px; 
    height:400px; 
    top:50%; 
    left:50%; 
    margin-left:-100px; // negative-half of element's width 
    margin-top:-200px; // negative-half of element's height 
}​ 

चाल यहाँ top:50%; left:50%; है। एक margin-left और एक margin-top के बराबर के साथ संयोजित नकारात्मक साढ़े अपने width और height, और अपने तत्व के अपने पृष्ठ में केंद्रित किया जाएगा।

यदि आप एरिक मेयर के सीएसएस रीसेट या normalize.css जैसे रीसेट स्टाइलशीट का उपयोग नहीं करते हैं, तो यह महत्वपूर्ण है कि आप इस चाल के लिए अपना bodymargin:0; पर सेट करें।

यहाँ एक jsfiddle है: http://jsfiddle.net/remibreton/fZywe/1/

एक साइट मैंने किया था की लाइव उदाहरण: http://althotels.ca/

Answer 5

आप केंद्रित सामग्री का आकार नहीं जानते हैं, तो आप http://jsfiddle.net/G6fUE/

<div class="popup-center"> 
    <div class="content"> 
     sadalshd<br /> 
     sadalshd<br /> 
     <img src="http://www.lorempixel.com/200/200" /> 
     sadalshd<br> 
    </div> 
</div>​ 

---

.popup-center { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 
.popup-center div { 
    margin-left: -50%; 
    margin-top: -50%; 
} 

: एक दो चरणों केंद्रित उदाहरण यहाँ की जरूरत है