एचटीएमएल में डिव को केंद्र में रखना काफी चुनौतीपूर्ण है, खासकर क्षैतिज और लंबवत दोनों तरह से करना। लेकिन इस लेख में मैं आपकी मदद करूंगा!

स्पष्टीकरण के साथ कोड उदाहरण:

मान लें कि क्लास myDiv के साथ एक div है:

hello dev

अब चलो,
केंद्र क्षैतिज रूप से सीएसएस का उपयोग कर रहा है:
इस div को क्षैतिज रूप से केन्द्रित करने के लिए हम इस CSS कोड का उपयोग कर सकते हैं:

.myDiv {
  padding: 0 100%;
}

इस सीएसएस कोड में पैडिंग: 0 100%; डिव को क्षैतिज रूप से केन्द्रित करने के लिए एक्स-अक्ष पैडिंग को 100% (पूर्ण-स्क्रीन चौड़ाई) पर सेट करता है।

केंद्र लंबवत रूप से सीएसएस का उपयोग कर रहा है:
इस div को लंबवत रूप से केन्द्रित करने के लिए हम इस CSS कोड का उपयोग कर सकते हैं:

.myDiv {
  padding: 100% 0;
}

इस सीएसएस कोड में पैडिंग: 100% 0; डिव को लंबवत रूप से केन्द्रित करने के लिए Y-अक्ष पैडिंग को 100% (पूर्ण-स्क्रीन ऊंचाई) पर सेट करता है।

केंद्र क्षैतिज और लंबवत रूप से सीएसएस का उपयोग करना:
आइए अब सीएसएस का उपयोग करके इसे लंबवत और क्षैतिज रूप से केन्द्रित करें।
आइए इस कोड का उपयोग करें:

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

इस कोड में डिस्प्ले: फ्लेक्स; डिस्प्ले मोड को फ्लेक्सबॉक्स पर सेट करता है जो इसके काम करने के लिए महत्वपूर्ण है। फिर औचित्य-सामग्री: केंद्र; सामग्री को केंद्र और संरेखित करने का औचित्य सिद्ध करता है-आइटम: केंद्र; वस्तुओं को केंद्र में संरेखित करता है। वे div को क्षैतिज रूप से केन्द्रित करने के लिए एक साथ काम करते हैं। अंत में पैडिंग: 100% 0; पहले की तरह div को लंबवत रूप से केन्द्रित करने के लिए Y-अक्ष (पूर्ण-स्क्रीन ऊंचाई) में 100% पैडिंग जोड़ता है। सभी को एक साथ रखकर वे लंबवत और क्षैतिज रूप से केन्द्रित होते हैं।

यह सब सीएसएस का उपयोग करके डिवीजनों को केंद्रित करने के बारे में था, और जानें

टेलविंडसीएसएस का उपयोग करना:

हां, मैं आपको टेलविंडसीएसएस का उपयोग करने के लिए बताए बिना इस लेख को समाप्त नहीं कर सकता। यह मेरा पसंदीदा ढाँचा है क्योंकि एक शुरुआत के तौर पर इससे मुझे बहुत मदद मिली।

आइए TailwindCSS का उपयोग करके div को केन्द्रित करें,
क्षैतिज रूप से:
किसी div को क्षैतिज रूप से केन्द्रित करने के लिए TailwindCSS का उपयोग इस कोड का उपयोग करके किया जा सकता है:

hello dev

इस कोड में टेलविंडसीएसएस क्लास फ्लेक्स डिस्प्ले को फ्लेक्सबॉक्स पर सेट करता है और आइटम-सेंटर आइटम को क्षैतिज रूप से केंद्रित करता है।

लंबवत:
किसी div को लंबवत रूप से केन्द्रित करने के लिए TailwindCSS का उपयोग इस कोड का उपयोग करके किया जा सकता है:

hello dev

इस कोड में टेलविंडसीएसएस क्लास एच-स्क्रीन फुल-स्क्रीन ऊंचाई का उपयोग करके div बनाता है, क्लास फ्लेक्स डिस्प्ले को फ्लेक्सबॉक्स पर सेट करता है और आइटम-सेंटर आइटम को केंद्र में रखता है।

ऊर्ध्वाधर और क्षैतिज:

hello dev

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

टेलविंडसीएसएस का उपयोग करके डिवीजनों को केंद्रित करने के लिए बस इतना ही, और जानें

निष्कर्ष:

डिव को केन्द्रित करने से आपकी वेबसाइट के तत्व अलग दिख सकते हैं और इसी तरह आप HTML डिव को केन्द्रित करते हैं।

अभ्यास करना सुनिश्चित करें और याद रखने के गुणों पर पूरी तरह निर्भर न रहें। आपका दिन शुभ हो :)

नमस्कार, मैं एक छात्र हूं और मुझे प्रोग्रामिंग पसंद है। यदि मेरे लेख आपकी मदद करते हैं और आप दान करना चाहते हैं तो धन्यवाद क्योंकि यह मेरी शिक्षा का समर्थन करेगा और मुझे मेरे लक्ष्य तक पहुंचने में मदद करेगा! दान नबीर14