वस्तुओं को केन्द्रित करने के लिए 3 समकालीन सीएसएस तकनीकें

HTML और CSS के साथ वस्तुओं को केन्द्रित करना काफी कठिन हुआ करता था। ख़ैर, अब ऐसा नहीं है. अब इसे करने के कई अलग-अलग तरीके हैं। और यह एक अच्छी बात है क्योंकि हमें अलग-अलग परिदृश्यों में अलग-अलग विकल्पों की आवश्यकता हो सकती है। इस वीडियो में हम वस्तुओं को केंद्र में रखने के मेरे तीन पसंदीदा तरीकों को देखेंगे, हम पोजिशनिंग का उपयोग करेंगे, फिर हम फ्लेक्सबॉक्स का उपयोग करेंगे, और अंत में, हम अपने गो-टू सीएसएस ग्रिड का उपयोग करेंगे।

ठीक है, चलिए इस पर आते हैं।

यह वास्तव में इतनी अजीब बात है कि इतने लंबे समय तक वेब पर किसी कंटेनर के केंद्र में वस्तुओं को रखना इतना कठिन था। खैर, क्षैतिज केन्द्रीकरण आसान था, लेकिन हाल के वर्षों तक ऊर्ध्वाधर केन्द्रीकरण लगभग असंभव था।

आइटमों को केंद्र में रखने के लिए सीएसएस पोजिशनिंग का उपयोग करना

सीएसएस पोजिशनिंग का उपयोग करने वाली यह पहली विधि संभवतः सबसे लंबे समय तक रही है, लेकिन नए गुणों के उभरने के कारण यह थोड़ा विकसित हुआ है। आइए एक उदाहरण देखें.

यहां हमारे पास यह बॉक्स है जिसे हम लाल बॉर्डर वाले इस अन्य कंटेनर में केन्द्रित करना चाहते हैं। यह एक मजबूत तत्व है और इसे सीधे div तत्व के भीतर रखा गया है जो कि यह लाल बॉक्स है जिसे हम यहां देख रहे हैं।

हम इस पद्धति के लिए पूर्ण स्थिति का उपयोग करने जा रहे हैं तो आइए इसे अपने strong तत्व में जोड़ें।

 strong { position: absolute; }

अब, इसे सही ढंग से कार्य करने के लिए, हमारे div हमारे आइटम को तैनात करने के लिए एक पोजिशनिंग संदर्भ बनाने की आवश्यकता होगी। ऐसा करने के कई अलग-अलग तरीके हैं लेकिन इस उदाहरण के लिए सबसे अच्छा विकल्प सापेक्ष स्थिति का उपयोग करना है।

 div { position: relative; }

अब हम अपने तत्व को हमारे div की ऊंचाई के पचास प्रतिशत से नीचे और चौड़ाई के पचास प्रतिशत से अधिक नीचे रख सकते हैं। शीर्ष से नीचे की स्थिति के लिए हम पचास प्रतिशत के मूल्य के साथ नई तार्किक संपत्ति, inset-block-start उपयोग कर सकते हैं। और, बाईं ओर से स्थिति के लिए हम पचास प्रतिशत के समान मान के साथ inset-inline-start उपयोग कर सकते हैं।

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

ठीक है, तो यह बिल्कुल केन्द्रित नहीं है, है ना?

खैर, ऐसा इसलिए है क्योंकि हमने आइटम को हमारे div के केंद्र में रखा है, लेकिन इसकी स्थिति इसके ऊपरी बाएं कोने पर आधारित है। अब हमें जो करने की ज़रूरत है वह आइटम को उसकी ऊंचाई के पचास प्रतिशत से ऊपर और उसकी चौड़ाई के पचास प्रतिशत से अधिक पीछे ले जाना है। इससे यह ठीक से केंद्र में स्थित हो जाएगा। लेकिन, हम यह कैसे कर सकते हैं?

यह वास्तव में बहुत आसान है। हम नई सीएसएस translate संपत्ति का उपयोग कर सकते हैं। पहला मान x-अक्ष के अनुदिश अनुवादित होगा. हमें पचास प्रतिशत पीछे जाने की आवश्यकता है, इसलिए हम नकारात्मक पचास प्रतिशत का मान जोड़ देंगे। और, दूसरा मान y-अक्ष के साथ अनुवादित होता है, हम इसे नकारात्मक पचास प्रतिशत का समान मान देंगे।

 strong { ... translate: -50% -50%; } 

और हम वहां जाते हैं. बिल्कुल केन्द्रित.

यहां स्थिति निर्धारण और अनुवाद का उपयोग करते हुए अंतिम कामकाजी उदाहरण दिया गया है:

तो, यह एक तरीका है जिसे हम कर सकते हैं, लेकिन यह मेरा पसंदीदा नहीं है।

आइटमों को केन्द्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करना

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

ठीक है, तो हम उसी बिंदु से शुरू कर रहे हैं, हमारे पास लाल सीमा के साथ हमारा बाहरी div है और फिर हमारा आंतरिक मजबूत तत्व है।

हम अपने डिव को डिस्प्ले, फ्लेक्स के साथ एक फ्लेक्स कंटेनर बनाकर शुरू करते हैं। फिर हम अपने आइटम को justify-content संपत्ति और केंद्र के मूल्य के साथ एक्स-अक्ष के साथ केंद्र में संरेखित कर सकते हैं। और अंतिम लेकिन महत्वपूर्ण बात यह है कि, हम align-items प्रॉपर्टी और केंद्र के समान मान के साथ y-अक्ष के साथ संरेखित कर सकते हैं।

 div { display: flex; justify-content: center; align-items: center; } 

और यह आपके पास है, आइटम ठीक से केंद्रित है और इस बार वहां तक पहुंचने के लिए कोड की केवल तीन पंक्तियां लगीं।

फ्लेक्सबॉक्स का उपयोग करके अंतिम कामकाजी उदाहरण यहां दिया गया है:

तो यह अच्छा है और मुझे कभी-कभी ऐसा करने की आवश्यकता होती है, लेकिन वस्तुओं को केंद्र में रखने का मेरा पसंदीदा तरीका सीएसएस ग्रिड का उपयोग करना है। और फिर, इसके लिए मेरे कारण यह हैं कि यह flex से भी आसान है और इसके लिए कम कोड की भी आवश्यकता होती है।

वस्तुओं को केन्द्रित करने के लिए ग्रिड का उपयोग करना

ठीक है, लाल बॉक्स और आंतरिक वस्तु के साथ भी वही शुरुआती बिंदु।

इस बार हम अपने डिव को grid के display वैल्यू के साथ एक ग्रिड कंटेनर बनाएंगे। अब यहाँ अच्छी बात यह है कि यदि हम चाहें तो हम उन्हीं दो गुणों का उपयोग कर सकते हैं जिनका उपयोग हमने अपने फ्लेक्सबॉक्स उदाहरण के लिए किया था। हम justify-content: center और align-items: center जोड़ सकते हैं। यह बिल्कुल उसी तरह से काम करता है।

 div { display: grid; justify-content: center; align-items: center; }

थोड़ा अजीब है लेकिन यह ग्रिड के काम करने का तरीका ही है, यह उसी बॉक्स-संरेखण गुणों का उपयोग कर सकता है जो फ्लेक्सबॉक्स करता है। लेकिन, अगर हमने इसे इसी तरह छोड़ दिया तो वास्तव में ग्रिड का उपयोग करने का कोई फायदा नहीं होगा?

खैर, इसके बजाय हम क्या कर सकते हैं, इन संरेखण गुणों को हटा दें, और उन्हें स्थान-आइटम संपत्ति से बदल दें। और, हम इस संपत्ति को केंद्र का मूल्य दे सकते हैं।

 div { display: grid; place-items: center; } 

हम वहां गए, अब हमने इसे सीएसएस की केवल दो पंक्तियों तक सीमित कर दिया है।

यहां सीएसएस ग्रिड का उपयोग कर अंतिम कामकाजी उदाहरण दिया गया है:

निष्कर्ष

तो जैसा कि मैंने पहले कहा था, यह निश्चित रूप से पहले की तुलना में बहुत आसान है। लेकिन ये सभी तकनीकें अभी भी बहुत प्रासंगिक हैं और किसी भी परिस्थिति में इनकी आवश्यकता हो सकती है, इसलिए किसी भी स्थिति में इन सभी को जानना अच्छा होगा। मैं निश्चित रूप से कम से कम कोड सीएसएस ग्रिड को प्राथमिकता दूंगा, और यदि वह काम नहीं करता है तो अगली सबसे अच्छी चीज फ्लेक्सबॉक्स है, और यदि उनमें से कोई भी काम नहीं करता है, तो पोजिशनिंग का प्रयास करें।