CSS का उपयोग करके div टैग को सेंटर कैसे करें?

विधि 1: HTML align एट्रिब्यूट (पुराना, अनुशंसित नहीं)

<div align="center" style="border: 2px solid blue">
    यह पैराग्राफ सेंटर में है
</div>

विधि 2: CSS margin: auto (आधुनिक, अनुशंसित)

<html>
<head>
    <title>CSS से Div सेंटर</title>
    <style>
        .mydiv {
            width: 30%;
            margin: auto;           /* क्षैतिज सेंटरिंग */
            padding: 10px;
            border: 4px solid black;
            text-align: center;     /* टेक्स्ट भी सेंटर */
        }
        body {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div>यह पैराग्राफ सेंटर नहीं है</div>
    <div class="mydiv">यह पैराग्राफ सेंटर में है</div>
</body>
</html>

विधि 3: Flexbox (आधुनिक, सबसे लचीला)

<style>
.flex-center {
    display: flex;
    justify-content: center;  /* क्षैतिज */
    align-items: center;      /* लंबवत */
    height: 200px;            /* ऊंचाई आवश्यक */
    border: 2px dashed red;
}
</style>

<div class="flex-center">
    <div>पूरी तरह सेंटर (क्षैतिज + लंबवत)</div>
</div>

विधि 4: CSS Grid

<style>
.grid-center {
    display: grid;
    place-items: center;  /* शॉर्टहैंड: align-items + justify-items */
    height: 200px;
    border: 2px dashed green;
}
</style>

<div class="grid-center">
    <div>Grid से सेंटर</div>
</div>

विधि 5: Absolute Positioning

<style>
.absolute-center {
    position: relative;
    height: 200px;
}
.absolute-center > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed orange;
}
</style>

<div class="absolute-center">
    <div>Absolute + Transform से सेंटर</div>
</div>

तुलना

सिफारिश

• केवल क्षैतिज: `margin: auto` + `width`
• क्षैतिज + लंबवत: Flexbox या Grid
• लिगेसी सपोर्ट: `margin: auto`
• टेक्स्ट सेंटरिंग के लिए: `text-align: center` कंटेनर पर