सीएसएस में डिव को कैसे केन्द्रित करें

डिव को केन्द्रित करना सबसे असंभव बात है

1. फ्लेक्सबॉक्स के साथ केन्द्रित करना

फ्लेक्सबॉक्स सामग्री को लंबवत और क्षैतिज रूप से केंद्रित करने का एक आधुनिक तरीका है:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

    
Centered Content

2. ग्रिड के साथ केन्द्रित करना

सीएसएस ग्रिड भी सामग्री को केन्द्रित कर सकता है:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

    
Centered Content

3. पूर्ण स्थिति निर्धारण के साथ केन्द्रित होना

आप पूर्ण स्थिति का उपयोग करके एक div को केन्द्रित कर सकते हैं:

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

    
Centered Content

4. मार्जिन ऑटो के साथ केन्द्रित करना

सरल क्षैतिज केंद्रीकरण के लिए, मार्जिन का उपयोग करें: ऑटो:

.centered-div {
    width: 50%;
    margin: 0 auto;
}

Centered Content

5. मार्जिन ऑटो के साथ केन्द्रित करना

इनलाइन या इनलाइन-ब्लॉक तत्वों के लिए:

.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

    
Centered Content