एक <div> को दूसरे <div> में क्षैतिज रूप से सेंटर कैसे करें?

परिचय

यहाँ एक HTML फॉर्म और एक CSS फ़ाइल (style.css) है। "o-div" बाहरी div है और "i-div" आंतरिक div क्लास है।

HTML कोड

<html> 
    <head> 
        <title>center a div</title> 
        <link href="../../Content/style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
        <div class="o-div"> 
            I am OUTER DIV 
            <div class="i-div"> 
                I am INNER DIV, 
                I am in Center 
            </div> 
        </div> 
    </body> 
</html>

आउटपुट

I am OUTER DIV I am INNER DIV, I am in Center

CSS (style.css)

body { 
    background-color: Gray; 
    padding: 30px; 
} 
.o-div { 
    padding: 50px; 
    background-color: Lime; 
} 
.i-div { 
    background-color: Fuchsia; 
    max-width: 400px; 
    height: 200px; 
    margin: 0 auto; 
    text-align: center; 
}

मुख्य CSS प्रॉपर्टीज समझाई गईं

• margin: 0 auto - आंतरिक div को क्षैतिज रूप से सेंटर करता है (टॉप/बॉटम मार्जिन 0, लेफ्ट/राइट ऑटो)
• max-width: 400px - अधिकतम चौड़ाई सेट करता है ताकि div कंटेनर से बड़ा न हो
• text-align: center - आंतरिक div के अंदर के टेक्स्ट को सेंटर करता है

आधुनिक विकल्प (Flexbox)

आधुनिक CSS में, आप Flexbox का उपयोग करके इसे अधिक सरलता से प्राप्त कर सकते हैं:

.o-div {
    display: flex;
    justify-content: center;
    align-items: center; /* वर्टिकल सेंटरिंग के लिए */
    padding: 50px;
    background-color: Lime;
}

.i-div {
    background-color: Fuchsia;
    max-width: 400px;
    height: 200px;
    text-align: center;
}

आधुनिक विकल्प (CSS Grid)

.o-div {
    display: grid;
    place-items: center; /* हॉरिजॉन्टल और वर्टिकल दोनों */
    padding: 50px;
    background-color: Lime;
}

.i-div {
    background-color: Fuchsia;
    max-width: 400px;
    height: 200px;
    text-align: center;
}

तुलना

सर्वोत्तम अभ्यास

1. नए प्रोजेक्ट्स के लिए Grid या Flexbox उपयोग करें - अधिक शक्तिशाली और रखरखाव में आसान
2. पुराने ब्राउज़र सपोर्ट के लिए margin: 0 auto - अभी भी पूरी तरह मान्य
3. हमेशा max-width सेट करें - ताकि कंटेंट कंटेनर से बाहर न निकले
4. box-sizing: border-box ग्लोबली सेट करें ताकि पैडिंग चौड़ाई में शामिल हो