पूर्ण क्षैतिज और ऊर्ध्वाधर केंद्र

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

हम सभी मार्जिन के बारे में जानते थे : 0 ऑटो; क्षैतिज केंद्रित के लिए, लेकिन मार्जिन: ऑटो; ऊर्ध्वाधर के लिए काम नहीं किया। यह आसानी से केवल ऊंचाई निर्धारित करके और निम्नलिखित शैलियों को लागू करके तय किया जा सकता है:

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

मैं इस समाधान का प्रस्ताव करने वाला पहला व्यक्ति नहीं हूं, हालांकि, इस दृष्टिकोण का उपयोग शायद ही कभी ऊर्ध्वाधर संरेखण में किया जाता है। सीएसएस के साथ हाउ टू सेंटर एनीथिंग एनीथिंग की टिप्पणियों में , साइमन जेएसफल्ड उदाहरण को संदर्भित करता है, जो ऊर्ध्वाधर केंद्र के लिए एक शानदार समाधान प्रदान करता है। यहाँ इस विषय पर कुछ और स्रोत दिए गए हैं ।

आइए एक नज़र डालें।

गौरव

• क्रॉस-ब्राउज़र संगतता (IE 8-10 सहित)
• कोई अतिरिक्त मार्कअप नहीं, न्यूनतम शैली
• अनुकूलन क्षमता
• पैडिंग स्वतंत्रता (कोई बॉक्स-साइज़िंग नहीं !)
• छवियों के लिए काम करता है

कमियों

• ऊंचाई निर्धारित की जानी चाहिए (देखें परिवर्तनीय ऊँचाई )
• यह अतिप्रवाह सेट करने की सिफारिश की जाती है : ऑटो ताकि सामग्री रेंगना न हो
• विंडोज़ फोन पर काम नहीं कर रहा है

ब्राउज़र संगतता

विधि का परीक्षण किया गया है और क्रोम, फ़ायरफ़ॉक्स, सफारी, मोबाइल सफारी और यहां तक ​​कि IE 8-10 में शानदार काम करता है। एक उपयोगकर्ता ने उल्लेख किया कि सामग्री विंडोज फोन पर लंबवत संरेखित नहीं होती है।

कंटेनर के अंदर

स्थिति के साथ एक कंटेनर में रखी गई सामग्री : सापेक्ष पूरी तरह से संरेखित होगी:

 .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

व्यूपोर्ट का उपयोग करना

सेट स्थिति: सामग्री के लिए तय और z- इंडेक्स सेट करें:

 .Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; } 

डेमो देखें

अनुकूलन क्षमता

वर्णित पद्धति का मुख्य लाभ इसका उत्कृष्ट कार्य है जब ऊंचाई या चौड़ाई प्रतिशत में सेट की जाती है, और यहां तक ​​कि न्यूनतम-चौड़ाई / अधिकतम-चौड़ाई और न्यूनतम-ऊंचाई / अधिकतम-ऊंचाई को समझना भी है।

 .Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

विस्थापन

यदि साइट में एक निश्चित हेडर है या आपको किसी अन्य तरीके से इंडेंट करने की आवश्यकता है, तो आपको केवल शीर्ष जैसे कोड जोड़ने की आवश्यकता है : 70px शैलियों; जबकि मार्जिन सेट है : ऑटो; सामग्री ब्लॉक ऊंचाई में सही ढंग से केंद्रित होगा।

आप सामग्री को दाईं ओर भी संरेखित कर सकते हैं, जिससे ऊँचाई पर केन्द्रित हो जाता है। ऐसा करने के लिए, सही का उपयोग करें : 0; बायां: ऑटो; दाएं या बाएं संरेखित करने के लिए : 0; सही: ऑटो; बाईं ओर संरेखित करें।

 .Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; } 

बहुत सारी सामग्री

लेआउट को फैलाने से रोकने के लिए बड़ी मात्रा में सामग्री के लिए, हम अतिप्रवाह का उपयोग करते हैं : ऑटो । एक ऊर्ध्वाधर स्क्रॉल दिखाई देता है। आप अधिकतम-ऊंचाई भी जोड़ सकते हैं : 100%; यदि सामग्री में कोई अतिरिक्त इंडेंटेशन नहीं है।

 .Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

छवि

छवियों के लिए यह विधि बहुत बढ़िया काम करती है! शैली की ऊंचाई जोड़ें : ऑटो; फिर चित्र कंटेनर के साथ बढ़ाया जाएगा।

 .Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

चर ऊंचाई

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

क्रॉस-ब्राउज़र संगतता के साथ समस्याएं हो सकती हैं, शायद आपको टेबल-सेल विधि (नीचे वर्णित) का उपयोग करना चाहिए।

• फ़ायरफ़ॉक्स / IE8: प्रदर्शन का उपयोग : तालिका दस्तावेज़ के शीर्ष पर लंबवत रूप से ब्लॉक को संरेखित करती है।
• IE9 / 10: प्रदर्शन का उपयोग : तालिका पृष्ठ के शीर्ष बाईं ओर ब्लॉक संरेखित करता है।
• मोबाइल सफ़ारी: यदि चौड़ाई प्रतिशत में सेट की गई है, तो क्षैतिज केन्द्रित ग्रस्त है

 .Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

अन्य तरीके

वर्णित विधि ज्यादातर मामलों में ठीक काम करती है, लेकिन कुछ अन्य तरीके हैं जो विशिष्ट समस्याओं को हल करने के लिए लागू हो सकते हैं।

ऋणात्मक मार्जिन

शायद सबसे लोकप्रिय तरीका है। उपयुक्त अगर इकाई आकार ज्ञात हैं।

 .is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ } 

फायदे:

• क्रॉस-ब्राउज़र संगतता
• न्यूनतम कोड

नुकसान:

• अनुकूल नहीं
• यदि कंटेनर में बहुत अधिक सामग्री है तो लेआउट रेंगता है
• आपको इंडेंटेशन के लिए क्षतिपूर्ति करनी होगी या बॉक्स-साइज़िंग का उपयोग करना होगा : बॉर्डर-बॉक्स

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

सबसे आसान तरीकों में से एक, ऊंचाई बदलने का समर्थन करता है। इस विषय पर एक विस्तृत लेख है - "सीएसएस-ट्रिक्स से केंद्रित प्रतिशत चौड़ाई / ऊँचाई तत्व "।

 .is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } 

फायदे:

• चर ऊंचाई
• न्यूनतम कोड

नुकसान:

• IE 8 में काम नहीं कर रहा है
• उपसर्गों का उपयोग करना
• परिवर्तन के साथ अन्य प्रभावों के काम में हस्तक्षेप कर सकते हैं
• कुछ मामलों में, प्रतिपादन करते समय, ब्लॉक और पाठ के किनारों को धुंधला कर दिया जाता है।

टेबल सेल

शायद सबसे अच्छे और आसान तरीकों में से एक। 456bereastreet से " IE7 से परे, सीएसएस के साथ लचीली ऊंचाई ऊर्ध्वाधर केंद्रित " लेख में विस्तार से वर्णन किया गया है। मुख्य दोष अतिरिक्त मार्कअप है: तीन तत्वों की आवश्यकता होती है:

 <div class="Pos-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> <!-- CONTENT --> </div> </div> </div> 

सीएसएस:

 .Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; } 

फायदे:

• चर ऊंचाई
• ब्लॉक में लेआउट बड़ी मात्रा में पाठ के साथ नहीं जाता है
• क्रॉस-ब्राउज़र संगतता

नुकसान:

• जटिल संरचना

flexbox

CSS, flexbox का भविष्य आज के कई लेआउट मुद्दों को हल करेगा। यह स्मैशिंग पत्रिका लेख में विस्तार से वर्णित है, जिसे फ्लेक्सबॉक्स के साथ सेंटरिंग एलीमेंट्स कहा जाता है।

 .Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } 

फायदे:

• सामग्री किसी भी ऊँचाई या चौड़ाई की हो सकती है।
• इसका उपयोग अधिक जटिल मामलों में किया जा सकता है।

नुकसान:

• IE 8-9 के लिए कोई समर्थन नहीं
• शरीर में कंटेनर या शैलियों की आवश्यकता होती है
• आधुनिक ब्राउज़रों में सही ढंग से काम करने के लिए कई प्रकार के उपसर्गों की आवश्यकता होती है
• संभावित प्रदर्शन के मुद्दे

परिणाम

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