CSS में Div को Center करने के सभी तरीके, रैंकिंग के साथ (2026)

CSS centering के साथ पहली लड़ाई कोई नहीं भूलता। आप Google करते हैं, Stack Overflow का snippet paste करते हैं, और आगे बढ़ जाते हैं — यह पूछे बिना कि क्या वह सही तरीका था या बस एक तरीका। 2026 में, div को center करने के कम से कम सात अलग-अलग तरीके हैं, और उनमें से कुछ को तो वर्षों पहले ही दफन हो जाना चाहिए था।

यहाँ वे सभी हैं, सबसे बुरे से सबसे अच्छे तक रैंक किए गए।

पूरी तुलना

तरीका	क्षैतिज	ऊर्ध्वाधर	निर्णय
`display: table-cell`	हाँ	हाँ	कभी नहीं
Negative margins	हाँ	हाँ	कभी नहीं
`abs` + `translate(-50%, -50%)`	हाँ	हाँ	बचें
`inset: 0` + `margin: auto`	हाँ	हाँ	कभी-कभी
`margin: auto`	हाँ	नहीं	केवल क्षैतिज
Flexbox	हाँ	हाँ	अच्छा डिफ़ॉल्ट
CSS Grid	हाँ	हाँ	सर्वश्रेष्ठ डिफ़ॉल्ट
CSS Anchor Positioning	सापेक्ष	सापेक्ष	विशिष्ट उपयोग

1. `display: table-cell` — कृपया रुकें

यह वह तरीका है जो लोग Flexbox के आने से पहले करते थे। आप अपने element को एक नकली table में लपेटते हैं, browser को यह सोचने पर मजबूर करते हैं कि यह एक <td> है, और vertical-align: middle का दुरुपयोग करते हैं।

.wrapper {
  display: table;
  width: 100%;
  height: 300px;
}

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

दो तत्काल समस्याएं। पहला, table row को fake करने के लिए आपको एक अतिरिक्त wrapper div चाहिए — यह केवल layout के लिए अतिरिक्त markup है। दूसरा, आप browser से semantically झूठ बोल रहे हैं। यह 2012 में समझ में आता था। Flexbox 2013 में आया। centering के लिए display: table-cell का 2026 में कोई स्थान नहीं है। [1]

एकमात्र अपवाद HTML emails हैं, जहाँ Outlook का rendering engine अभी भी 2003 में जी रहा है और यह तकनीक वास्तव में आवश्यक है। email templates के बाहर, इससे दूर रहें।

2. Negative Margins — डिज़ाइन से ही कमज़ोर

यहाँ विचार यह है कि element को 50% नीचे और 50% दाईं ओर धकेलें, फिर negative margins का उपयोग करके इसे अपनी dimensions के बिल्कुल आधे से वापस खींचें।

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;   /* height का आधा */
  margin-left: -100px; /* width का आधा */
}

आपको element की dimensions को hardcode करना होगा। जैसे ही content बदलती है और div बड़ा या छोटा होता है, आपकी centering टूट जाती है। Dynamic content — जो मूल रूप से हर वास्तविक element होता है — इस तकनीक को तुरंत विफल कर देती है। यह तो display: table-cell हैक्स से भी पुराना है। 2026 में इसे लिखने का वास्तव में कोई कारण नहीं है [2]।

3. `position: absolute` + `translate` — क्लासिक हैक

यह 2015–2020 के युग का प्रमुख snippet था। इसने translate का उपयोग करके negative margins की hardcoded-dimensions समस्या को हल किया, जो element की अपनी size के प्रतिशत के रूप में काम करता है।

.parent {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

यह काम करता है, और dynamic content पर नहीं टूटता। लेकिन यह अभी भी एक hack है — आप position: absolute को उसके इच्छित उद्देश्य से बहुत आगे खींच रहे हैं। element को normal flow से बाहर खींचा जाता है, parent को एक defined height चाहिए, और पूरी चीज़ ऐसे लगती है जैसे किसी ने लिखी हो जो क्या जानता था लेकिन क्यों नहीं। CSS-Tricks का 2026 में state-of-centering लेख इस approach को “बचने लायक” कहता है, इसकी तुलना यह करते हुए कि कैसे float-based layouts को अंततः retire कर दिया गया जब कुछ बेहतर आया [1]। मैं सहमत हूँ।

इसे केवल तभी उपयोग करें जब आप 2018 से पहले के legacy code को maintain कर रहे हों और structure को नहीं बदल सकते। अन्यथा, नीचे बेहतर विकल्प हैं।

4. `inset: 0` + `margin: auto` — सही तरीके से Absolute Positioning

यदि आपको position: absolute या position: fixed के साथ काम करना ही है, तो यह उसके अंदर center करने का आधुनिक तरीका है। कोई transform गणित नहीं, कोई offset नहीं।

.parent {
  position: relative;
}

.box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

inset: 0 top: 0; right: 0; bottom: 0; left: 0 का shorthand है। सभी चार edges को zero पर pin करने और margin: auto के साथ, browser सभी sides पर बचे हुए space को समान रूप से वितरित करता है — element को साफ तरीके से center करता है [3]।

यह वास्तव में पठनीय है। यह वही करता है जो कहता है। नुकसान यह है कि position: absolute element को normal flow से बाहर ले जाता है, इसलिए parent को एक defined height चाहिए और आस-पास के elements इसके साथ स्वाभाविक रूप से interact नहीं करेंगे। modals, overlays, और loading spinners के लिए उपयुक्त — एक general purpose समाधान नहीं।

5. `margin: auto` — अपनी सीमाओं के बारे में ईमानदार

.box {
  width: 700px;
  margin: 0 auto;
}

इसे सभी जानते हैं। यह CSS में हमेशा से रहा है। एक block element पर width set करें, horizontal axis पर margin: auto जोड़ें, और यह अपने container के horizontal center में आ जाता है।

margin: auto normal flow में vertical centering के लिए कुछ नहीं करता। यह कोई bug नहीं है, यही spec का तरीका है। vertical auto margins के लिए, आपको flex या grid formatting context चाहिए। तो यह केवल horizontal के लिए एक tool है — और उस काम के लिए बहुत अच्छा है। page के center में एक content column को सीमित करना? यह बिल्कुल सही विकल्प है। इसे और अधिक करने की कोशिश न करें [4]।

css centering methods ranked

6. Flexbox — भरोसेमंद कार्यकर्ता

Flexbox शायद वह है जिसे 2026 में अधिकांश frontend devs reflex से चुनते हैं, और सच कहूँ तो, यह ठीक है।

.parent {
  display: flex;
  justify-content: center; /* क्षैतिज */
  align-items: center;     /* ऊर्ध्वाधर */
}

दो properties। दोनों axes। काम खत्म। parent को fixed pixel height की जरूरत नहीं है — जब तक vertical space उपलब्ध है, यह काम करता है। जहाँ Flexbox Grid से वास्तव में बेहतर है वह है mixed-alignment scenarios में: एक item को center करते हुए दूसरे को right-align करना, कुछ children को stretch करते हुए दूसरों को center करना, इस तरह की चीजें [5]।

एक बात जो लोगों को हमेशा पकड़ती है: यदि parent container की कोई defined height नहीं है, तो center करने के लिए कोई vertical space नहीं है, इसलिए कुछ भी shift नहीं लगता। min-height: 100dvh या एक fixed height set करें और यह तुरंत काम करता है। यह एकल गलतफहमी “मेरी centering क्यों काम नहीं कर रही” प्रश्नों के एक बड़े हिस्से के लिए जिम्मेदार है [6]।

7. CSS Grid — 2026 में सर्वश्रेष्ठ डिफ़ॉल्ट

दो lines।

.parent {
  display: grid;
  place-items: center;
}

place-items align-items + justify-items का shorthand है। एक property, दोनों axes, कोई trick नहीं। एक full-page hero, एक centered card, या एक loading screen के लिए, यह उपलब्ध सबसे साफ विकल्प है — पठनीय, जानबूझकर, और तोड़ना लगभग असंभव [1]।

/* पूरे viewport का centered layout */
.page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

यदि आपको items के एक group को एक block के रूप में center करना है (प्रत्येक item को अपनी cell में center करने के बजाय), तो place-items को place-content: center से बदलें। अलग behavior, दोनों जानने लायक।

CSS Grid 2026 में 97%+ browser support पर है [7]। कोई भी production browser नहीं है जिसे आप target कर रहे हों जो इसे support न करता हो। Grid से बचने का “browser support” बहाना लगभग 2020 में खत्म हो गया।

8. CSS Anchor Positioning — नया, विशिष्ट, और वह नहीं जो आप सोचते हैं

Anchor positioning वर्षों में CSS centering का सबसे रोमांचक addition है, लेकिन यह एक विशिष्ट समस्या को हल करता है — एक floating element को किसी अन्य विशिष्ट element के सापेक्ष center करना — न कि सामान्य centering।

.button {
  anchor-name: --my-button;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  bottom: anchor(top);
  justify-self: anchor-center;
}

anchor-center एक नया alignment value है जो positioned element को उसके named anchor element के ऊपर center करता है — viewport नहीं, nearest positioned ancestor नहीं, बल्कि वह exact element जो आप declare करते हैं [3]। mid-2026 तक, यह Chrome 125+, Edge 125+, Safari 26+, और Firefox 147+ में supported है [7]।

केवल page पर div को center करने के लिए anchor positioning न चुनें। यह उन elements के लिए designed है जो किसी अन्य element का अनुसरण करते हैं — tooltips, popovers, dropdowns, context menus। यह mechanism Grid या Flexbox से पूरी तरह अलग है और उस चीज़ के लिए बहुत जटिलता लाता है जिसे वे दो एक line में हल करते हैं। इसे तब उपयोग करें जब use case वास्तव में उपयुक्त हो।

वह एक नियम जो सभी को गलत करता है

कोई फर्क नहीं पड़ता कि आप कौन सी तकनीक उपयोग करते हैं — यदि parent की कोई defined height नहीं है, तो vertical centering कोई दृश्य परिणाम नहीं देती। container अपने content को fit करने के लिए collapse हो जाता है, distribute करने के लिए शून्य empty space छोड़ता है। इस list की हर विधि उसी तरह व्यवहार करती है। parent पर min-height, एक fixed height, या 100dvh set करें। फिर centering अपेक्षित रूप से काम करती है [4]।

99% मामलों के लिए: place-items: center के साथ Grid चुनें। जब आपको mixed-alignment children पर अधिक नियंत्रण चाहिए, Flexbox पर जाएं। specific elements से anchored floating UI elements के लिए, anchor positioning अंततः उपलब्ध है। इस list में उन तीन से ऊपर सब कुछ legacy है — या इससे भी बुरा, 2015 की एक आदत जिस पर किसी ने सवाल नहीं उठाया।

समाप्त

पूरी तुलना

1. display: table-cell — कृपया रुकें

2. Negative Margins — डिज़ाइन से ही कमज़ोर

3. position: absolute + translate — क्लासिक हैक

4. inset: 0 + margin: auto — सही तरीके से Absolute Positioning

5. margin: auto — अपनी सीमाओं के बारे में ईमानदार