CSS (फ्लेक्सबॉक्स) में डिव को कैसे केन्द्रित करें

सीएसएस में सबसे अधिक पूछे जाने वाले प्रश्न का सीधा उत्तर यहां दिया गया है: एक डिव को केंद्र में रखने के लिए, डिस्प्ले: फ्लेक्स, जस्टिफाई-कंटेंट: सेंटर और एलाइन-आइटम: सेंटर को इसके पैरेंट पर रखें। बस इतना ही - कंटेनर पर तीन घोषणाएं, और बच्चा किसी भी आकार में क्षैतिज और लंबवत रूप से इसके अंदर पूरी तरह से केंद्रित बैठता है। यह पृष्ठ जेनरेटर को ठीक उसी संयोजन के साथ खोलता है जो पहले से ही लागू है, इसलिए नीचे दिए गए पूर्वावलोकन से पता चलता है कि यह अभी तीन क्रमांकित बक्सों पर काम कर रहा है।

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

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