HTML में div को सेंटर अलाइन कैसे करें?

त्वरित उत्तर

div एलिमेंट को सेंटर करने के दो मुख्य तरीके हैं:

1. टेक्स्ट सेंटर करने के लिए: div style="text-align:center"
2. पूरे div को सेंटर करने के लिए: div style="margin: 0 auto"

पूर्ण कोड उदाहरण

<div style="text-align:center; width: 300px; margin: 0 auto; border-style: dotted;"> 
    <p>hi</p> 
</div>

आउटपुट

विस्तृत व्याख्या

विधि 1: margin: 0 auto (ब्लॉक एलिमेंट्स के लिए)

यह सबसे आम और विश्वसनीय तरीका है ब्लॉक-लेवल एलिमेंट्स (जैसे div) को क्षैतिज रूप से सेंटर करने का।

<div style="width: 50%; margin: 0 auto; background: #f0f0f0; padding: 20px;">
    यह div पेज के बीच में है
</div>

विधि 2: Flexbox (आधुनिक और लचीला)

<div style="display: flex; justify-content: center;">
    <div style="width: 300px; background: #f0f0f0; padding: 20px;">
        Flexbox से सेंटर किया गया
    </div>
</div>

विधि 3: Grid (सबसे सरल आधुनिक तरीका)

<div style="display: grid; place-items: center; height: 200px;">
    <div style="background: #f0f0f0; padding: 20px;">
        Grid से सेंटर किया गया
    </div>
</div>

विधि 4: Absolute Positioning

<div style="position: relative; height: 200px;">
    <div style="position: absolute; left: 50%; transform: translateX(-50%); background: #f0f0f0; padding: 20px;">
        Absolute positioning से सेंटर
    </div>
</div>

कब कौन सी विधि उपयोग करें?

महत्वपूर्ण नोट्स

• margin: 0 auto के लिए चौड़ाई (width) निर्दिष्ट करना आवश्यक है
• इंलाइन एलिमेंट्स (span, a, img) के लिए text-align: center पैरेंट पर लागू करें
• वर्टिकल सेंटरिंग के लिए Flexbox या Grid सबसे अच्छा है