परिचय

सीएसएस का उपयोग करके एक div तत्व को केंद्र में रखने के कई तरीके हैं। यहां कुछ सामान्य तरीके दिए गए हैं:

1. फ्लेक्सबॉक्स का उपयोग करना

फ्लेक्सबॉक्स तत्वों को क्षैतिज और लंबवत रूप से केंद्रित करने के लिए सबसे लोकप्रिय तरीकों में से एक है।

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`

    
Isi di sini
`}

2. ग्रिड लेआउट का उपयोग करना

सीएसएस ग्रिड तत्वों को केंद्र में रखने का एक आसान तरीका भी प्रदान करता है।

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`

    
Isi di sini
`}

3. पूर्ण स्थिति और परिवर्तन का उपयोग करना

यह विधि तत्व को केंद्र में रखने के लिए पोजीशन: एब्सोल्यूट और ट्रांसफॉर्म का उपयोग करती है।

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`

    
Isi di sini
`}

4. ऑटो मार्जिन का उपयोग करना

इस पद्धति का उपयोग तत्वों को स्वचालित मार्जिन के साथ केंद्र में क्षैतिज रूप से रखने के लिए किया जाता है। हालाँकि, वर्टिकल के लिए, अतिरिक्त युक्तियों की आवश्यकता होती है।

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`
Isi di sini
`}

5. पाठ-संरेखण और रेखा-ऊंचाई का उपयोग करना (केवल क्षैतिज केन्द्रीकरण)

यह टेक्स्ट या इनलाइन-ब्लॉक तत्वों के लिए अच्छा काम करता है।

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`

    
Isi di sini
`}

6. टेबल डिस्प्ले का उपयोग करना

यह एक पुरानी तकनीक है लेकिन यह अभी भी काम करती है।

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`

    
Isi di sini
`}

निष्कर्ष

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