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

Question

मैं सीएसएस का उपयोग करके एक <div>दूसरे के भीतर क्षैतिज रूप से केंद्र कैसे कर सकता हूं <div>?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Comments

उन महान जवाबों में, मैं केवल यह बताना चाहता हूं कि आपको "#inner" को "चौड़ाई" देनी होगी, या यह "100%" होगा, और आप यह नहीं बता सकते कि यह पहले से ही केंद्रित है।

— जॉनी

जोमा टेक मुझे यहां लाया

— बारू बारबु 18

@ बरबू बारु: किस तरीके से? किस संदर्भ में?

— पीटर मोर्टेंसन

youtu.be/kZC12U6EhTc?t=202

— बारू बारबू

Answer 1

आप इस CSS को भीतर तक लागू कर सकते हैं <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

बेशक, आप स्थापित करने के लिए की जरूरत नहीं है widthकरने के लिए 50%। युक्त से कम कोई भी चौड़ाई <div>काम करेगी। margin: 0 autoक्या वास्तविक केंद्रित करता है।

यदि आप Internet Explorer 8 (और बाद में) को लक्षित कर रहे हैं , तो इसके बजाय ऐसा होना बेहतर हो सकता है:

#inner {
  display: table;
  margin: 0 auto;
}

यह आंतरिक तत्व केंद्र को क्षैतिज रूप से बनाएगा और यह एक विशिष्ट सेटिंग के बिना काम करता है width।

यहाँ काम कर उदाहरण:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Comments

ऊर्ध्वाधर केंद्र के लिए मैं आमतौर पर "लाइन-ऊंचाई" (लाइन-ऊंचाई == ऊंचाई) का उपयोग करता हूं। यह सरल और अच्छा है, लेकिन यह केवल एक पंक्ति सामग्री पाठ के साथ काम कर रहा है :)

— निकोलस गिलाउम

आपको IE पर अच्छी तरह से काम करने के लिए अपने HTML पेज पर DOCTYPE टैग का उपयोग करना होगा।

— फैबियो

ध्यान दें कि "फ्लोट: कोई नहीं;" जोड़ना आवश्यक हो सकता है # धावक के लिए।

— मर्ट मर्ट्स

आपने शीर्ष और निचले मार्जिन को 0 पर सेट किया है, जो असंबंधित है। बेहतर है margin-left: auto; margin-right: autoमुझे लगता है।

— इमैनुएल टाउज़री

जरूरी नहीं margin:0 auto: यह margin: <whatever_vertical_margin_you_need> autoदूसरा क्षैतिज मार्जिन हो सकता है।

— याकॉव

Answer 2

यदि आप आंतरिक पर एक निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं तो divआप कुछ इस तरह कर सकते हैं:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

जो भीतर divको एक इनलाइन तत्व बनाता है जिसे केंद्र में रखा जा सकता है text-align।

Comments

@SabaAhang के लिए सही वाक्यविन्यास होगा float: none;और शायद इसकी आवश्यकता केवल इसलिए है क्योंकि #inner को आपके CSS में या floatतो leftया rightकहीं और से विरासत में मिला है ।

— डग मैकलीन

यह एक अच्छा उपाय है। बस भीतरी इच्छा इनहेरिट ध्यान रखें कि text-alignआप आंतरिक के सेट कर सकते हैं तो text-alignकरने के लिए initialया कुछ अन्य मूल्य।

— पोमलेरी

अच्छा समाधान मुझे ऐसा लगता है

— simon

Answer 3

सबसे अच्छा दृष्टिकोण सीएसएस 3 के साथ हैं ।

बॉक्स मॉडल:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

अपनी उपयोगिता के अनुसार आप box-orient, box-flex, box-directionगुणों का उपयोग भी कर सकते हैं।

फ्लेक्स :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

बाल तत्वों को केंद्रित करने के बारे में और पढ़ें

• लिंक 2

• लिंक 3

• लिंक 4

और यह बताता है कि बॉक्स मॉडल सबसे अच्छा तरीका क्यों है :

• W3C बॉक्स मॉडल को बेहतर क्यों माना जाता है?

Comments

सुनिश्चित करें कि आप इस समाधान को लागू करने से पहले यह उत्तर पहले पढ़ लें ।

— सीममानन

सफारी, अब के रूप में, अभी भी आवश्यकता है -webkitflexbox के लिए झंडे ( display: -webkit-flex;और -webkit-align-items: center;और -webkit-justify-content: center;)

— यूसुफ हैनसेन

मैं हमेशा सोचता हूं कि बहुत सारे कोड का उपयोग करना उदाहरण के लिए बुरा व्यवहार है इस कोड के साथ मैं अपना div केंद्र करता हूं: प्रदर्शन: तालिका; मार्जिन: ऑटो; सरल और आसान

— simon

क्या यह मुझे है या यह कोड स्निपेट केंद्रित नहीं है

— माइक

2020 में हम flexbox caniuse.com/#feat=flexbox

— tonygatta

Answer 4

मान लीजिए कि आपका div 200 पिक्सेल चौड़ा है:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

सुनिश्चित करें कि पेरेंट तत्व है तैनात , यानी, रिश्तेदार, स्थिर, पूर्ण, या चिपचिपा।

यदि आप अपनी div की चौड़ाई नहीं जानते हैं, तो आप transform:translateX(-50%);ऋणात्मक मार्जिन के बजाय उपयोग कर सकते हैं ।

https://jsfiddle.net/gjvfxxdj/

साथ सीएसएस calc () , कोड और भी आसान प्राप्त कर सकते हैं:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

सिद्धांत अभी भी वही है; आइटम को बीच में रखें और चौड़ाई के लिए क्षतिपूर्ति करें।

Comments

मुझे यह समाधान पसंद नहीं है क्योंकि जब आंतरिक तत्व स्क्रीन के लिए बहुत व्यापक है, तो आप पूरे तत्व को क्षैतिज रूप से स्क्रॉल नहीं कर सकते। मार्जिन: 0 ऑटो बेहतर काम करता है।

— अलसो

मार्जिन-वाम: ऑटो; मार्जिन-राइट: ऑटो; एक ब्लॉक स्तर के तत्व को केंद्र करता है

— किल्स्क्रीन

अधिकांश ब्लॉक स्तर के तत्वों के लिए डिफ़ॉल्ट चौड़ाई ऑटो है, जो स्क्रीन पर उपलब्ध क्षेत्र को भरता है। बस इसे बाएं संरेखण के समान स्थिति में केंद्रित किया जा रहा है। यदि आप चाहते हैं कि यह नेत्रहीन रूप से केंद्रित हो तो आपको एक चौड़ाई (या अधिकतम चौड़ाई निर्धारित करनी चाहिए, हालांकि Internet Explorer 6 और पहले यह समर्थन नहीं करता है, और IE 7 केवल मानक मोड में इसका समर्थन करता है)।

— किल्स्क्रीन

Answer 5

मैंने यह उदाहरण बनाया है कि कैसे लंबवत और क्षैतिज रूप से दिखाया जाए align।

कोड मूल रूप से यह है:

#outer {
  position: relative;
}

तथा...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

और यह तब भी रहेगा centerजब आप अपनी स्क्रीन का आकार बदल लेंगे ।

Comments

इस विधि के लिए +1, मैं इसके साथ उत्तर देने वाला था। ध्यान दें कि आपको उस तत्व पर एक चौड़ाई घोषित करनी होगी जिसे आप क्षैतिज रूप से केन्द्रित करना चाहते हैं (या ऊँचाई यदि लंबवत केन्द्रित हो)। यहाँ एक व्यापक विवरण दिया गया है: codepen.io/shshaw/full/gEiDt । तत्वों को लंबवत और / या क्षैतिज रूप से केंद्रित करने के अधिक बहुमुखी और व्यापक रूप से समर्थित तरीकों में से एक।

— १

आप div के भीतर पैडिंग का उपयोग नहीं कर सकते हैं, लेकिन यदि आप भ्रम देना चाहते हैं तो उसी रंग की सीमा का उपयोग करें।

— स्क्विरेल

मुझे लगता है कि इस विधि को काम करने के लिए, आपको आंतरिक div के साथ और ऊंचाई निर्धारित करने की आवश्यकता है

— निकोलस S.Xu

Answer 6

कुछ पोस्टरों ने सीएसएस 3 का उपयोग करके केंद्र में जाने का रास्ता बताया है display:box।

यह सिंटैक्स पुराना है और इसका अब उपयोग नहीं किया जाना चाहिए। [यह भी देखें इस पोस्ट] ।

तो बस पूर्णता के लिए यहां फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल का उपयोग करके CSS 3 में केंद्र का नवीनतम तरीका है ।

तो अगर आपके पास सरल मार्कअप है जैसे:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... और आप अपने आइटम को बॉक्स के भीतर रखना चाहते हैं, यहां आपको मूल तत्व (.box) की आवश्यकता है।

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है जो फ्लेक्सबॉक्स के लिए पुराने सिंटैक्स का उपयोग करते हैं तो यहां एक अच्छी जगह है।

Comments

"वाक्यविन्यास पुराना है" से आपका क्या तात्पर्य है, क्या यह पदावनत है?

— कोंगा राजू

फ्लेक्सबॉक्स विनिर्देश 3 प्रमुख संशोधनों के माध्यम से चला गया है। सबसे हालिया मसौदा सेप्ट 2012 से है, जो आधिकारिक तौर पर पिछले सभी ड्राफ्ट को चित्रित करता है। हालाँकि, ब्राउज़र समर्थन धब्बेदार है (विशेष रूप से पुराने एंड्रॉइड ब्राउज़र): stackoverflow.com/questions/15662578/…

— cimmanon

यह मेरे लिए क्रोम में काम करता है जब जस्टिन पॉली का संस्करण नहीं था।

— वर्न जेन्सेन

"औचित्य-सामग्री: केंद्र नहीं है?" ऊर्ध्वाधर संरेखण के लिए और "संरेखित-आइटम: केंद्र;" क्षैतिज संरेखण के लिए

— राउटर वनरॉक

@WouterVanherck यह flex-directionमूल्य पर निर्भर करता है । यदि यह 'पंक्ति' (डिफ़ॉल्ट) है - तो justify-content: center; क्षैतिज संरेखण के लिए है (जैसे मैंने उत्तर में उल्लेख किया है) यदि यह 'कॉलम' है - तो justify-content: center;ऊर्ध्वाधर संरेखण के लिए है।

— डेनियल

Answer 7

यदि आप एक निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं और अतिरिक्त मार्जिन नहीं चाहते हैं, तो display: inline-blockअपने तत्व में जोड़ें ।

आप उपयोग कर सकते हैं:

#element {
    display: table;
    margin: 0 auto;
}

Comments

प्रदर्शन के रूप में समान आवश्यकताएं: इनलाइन-ब्लॉक भी ( quirksmode.org/css/display.html )

— montrealmike

मैंने भी इसका इस्तेमाल किया है, लेकिन मैंने पहले कभी सामना नहीं किया display: table;। यह क्या करता है?

— मैट क्रेमेंस

Answer 8

अज्ञात ऊंचाई और चौड़ाई का एक केंद्र केंद्रित

क्षैतिज और लंबवत। यह यथोचित आधुनिक ब्राउज़रों (फ़ायरफ़ॉक्स, सफारी / वेबकीट, क्रोम, इंटरनेट एक्सप्लोरर 10, ओपेरा, आदि) के साथ काम करता है।

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

<div class="content">This works with any content</div>

इसके साथ टिंकर कोडपेन पर या जेएसबीएन पर आगे ।

Answer 9

यदि आप इसे चौड़ाई नहीं देते हैं तो यह केंद्रित नहीं हो सकता। अन्यथा, यह डिफ़ॉल्ट रूप से, संपूर्ण क्षैतिज स्थान लेगा।

Comments

और यदि आप चौड़ाई नहीं जानते हैं? कहो क्योंकि सामग्री गतिशील है?

— जमन

अधिकतम चौड़ाई? उसका क्या?

मैं का उपयोग करें width: fit-content;और margin: 0 auto। मुझे लगता है कि यह अज्ञात चौड़ाई के साथ काम कर सकता है।

— रिक

Answer 10

CSS 3 का बॉक्स-संरेखित गुण

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Comments

सुनिश्चित करें कि आप इस समाधान को लागू करने से पहले यह उत्तर पहले पढ़ लें ।

— साइमन

Answer 11

सेट widthऔर सेट margin-leftऔर margin-rightकरने के लिए auto। यह केवल क्षैतिज के लिए है , हालांकि। यदि आप दोनों तरीके चाहते हैं, तो आप इसे दोनों तरीकों से करेंगे। प्रयोग करने से डरो मत; ऐसा नहीं है कि आप कुछ भी तोड़ देंगे।

Answer 12

मुझे हाल ही में एक "छिपी हुई" डिव (यानी display:none;) को केंद्र में रखना था , जिसके भीतर एक संक्षिप्त रूप था जो पृष्ठ पर केंद्रित होने की आवश्यकता थी। मैंने छिपे हुए डिव को प्रदर्शित करने के लिए निम्नलिखित jQuery कोड लिखा और फिर सीएसएस सामग्री को तालिका की स्वचालित उत्पन्न चौड़ाई में अद्यतन किया और इसे बदलने के लिए मार्जिन को बदल दिया। (किसी लिंक पर क्लिक करने से प्रदर्शन टॉगल हो जाता है, लेकिन यह कोड प्रदर्शित करना आवश्यक नहीं था।)

ध्यान दें: मैं इस कोड को साझा कर रहा हूं, क्योंकि Google ने मुझे इस स्टैक ओवरफ्लो समाधान के लिए लाया था और सब कुछ काम किया होगा सिवाय इसके कि छिपे हुए तत्वों की कोई चौड़ाई नहीं है और जब तक वे प्रदर्शित नहीं किए जाते हैं, तब तक उनका आकार बदला नहीं जा सकता है।

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 13

जिस तरह से मैं आम तौर पर यह कर रहा हूँ पूर्ण स्थिति का उपयोग कर रहा है:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

बाहरी div को काम करने के लिए किसी अतिरिक्त प्रॉपराइट्स की आवश्यकता नहीं है।

Comments

यदि आपके पास अन्य div के नीचे अन्य divs है तो यह काम नहीं कर सकता है।

— NoChance

Answer 14

फ़ायरफ़ॉक्स और क्रोम के लिए:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स और क्रोम के लिए:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align:संपत्ति आधुनिक ब्राउज़रों के लिए वैकल्पिक है, लेकिन यह लीगेसी ब्राउज़र समर्थन के लिए इंटरनेट एक्सप्लोरर असामान्य मोड में आवश्यक है।

Comments

पाठ-संरेखित संपत्ति की कोई आवश्यकता नहीं है। यह पूरी तरह से आवश्यक है।

— तौहीद रहमान

पाठ-संरेखण वास्तव में आईई क्विक मोड में काम करने के लिए आवश्यक है, इसलिए यदि आप पुराने ब्राउज़रों का समर्थन करने के लिए थोड़ी अभिव्यक्ति जोड़ने का मन नहीं रखते हैं तो इसे वहां रखें। (IE8 IE8 नियमों के साथ और IE7 नियम दोनों पाठ-संरेखित किए बिना काम करते हैं, इसलिए यह केवल IE6 और पुराने कि चिंतित हैं हो सकता है)

— heytools

Answer 15

उपयोग:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

तत्वों में से एक के लिए एक चौड़ाई निर्धारित किए बिना इसके लिए एक और समाधान सीएसएस 3 transformविशेषता का उपयोग कर रहा है ।

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

चाल यह है कि तत्व को अपनी चौड़ाई के बाईं ओर 50 प्रतिशत translateX(-50%)सेट करता है #inner। आप ऊर्ध्वाधर संरेखण के लिए एक ही चाल का उपयोग कर सकते हैं।

यहाँ एक फिडल है जो क्षैतिज और ऊर्ध्वाधर संरेखण दिखा रहा है।

अधिक जानकारी मोज़िला डेवलपर नेटवर्क पर है ।

Comments

एक के रूप में अच्छी तरह से विक्रेता उपसर्गों की आवश्यकता हो सकती है:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);

— Skippy le Grand Gourou

Answer 17

क्रिस कॉयियर जिन्होंने अपने ब्लॉग पर 'सेंटरिंग इन द अननोन' पर एक उत्कृष्ट पोस्ट लिखी । यह कई समाधानों का एक राउंडअप है। मैंने एक पोस्ट किया है जो इस प्रश्न में पोस्ट नहीं किया गया है। इसमें फ्लेक्सबॉक्स समाधान की तुलना में अधिक ब्राउज़र समर्थन है , और आप इसका उपयोग नहीं कर रहे हैं display: table;जो अन्य चीजों को तोड़ सकता है।

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 18

मुझे हाल ही में एक दृष्टिकोण मिला:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

दोनों तत्वों को सही ढंग से कार्य करने के लिए समान चौड़ाई होनी चाहिए।

Comments

बस के लिए इस नियम सेट #innerकेवल: #inner { position:relative; left:50%; transform:translateX(-50%); }। यह किसी भी चौड़ाई के लिए काम करता है।

— जोस रुई सैंटोस

Answer 19

उदाहरण के लिए, इस लिंक और नीचे दिए गए स्निपेट को देखें:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

यदि आपके पास माता-पिता के तहत बहुत सारे बच्चे हैं, तो आपकी सीएसएस सामग्री फ़िडल पर इस उदाहरण की तरह होनी चाहिए ।

HTML सामग्री लुक इसे पसंद करती है:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

फिर इस उदाहरण को बेला पर देखें ।

Answer 20

केवल क्षैतिज रूप से केंद्रित करना

मेरे अनुभव में, एक बॉक्स को क्षैतिज रूप से केंद्र में रखने का सबसे अच्छा तरीका निम्नलिखित गुणों को लागू करना है:

बर्तन:

• होना चाहिए text-align: center;

सामग्री बॉक्स:

• होना चाहिए display: inline-block;

डेमो:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

यह भी देखें फिडल !

---

क्षैतिज और लंबवत दोनों को केंद्रित करना

मेरे अनुभव में, एक बॉक्स को लंबवत और क्षैतिज रूप से केंद्र में रखने का सबसे अच्छा तरीका एक अतिरिक्त कंटेनर का उपयोग करना और निम्नलिखित गुणों को लागू करना है:

बाहरी कंटेनर:

• होना चाहिए display: table;

आंतरिक कंटेनर:

• होना चाहिए display: table-cell;
• होना चाहिए vertical-align: middle;
• होना चाहिए text-align: center;

सामग्री बॉक्स:

• होना चाहिए display: inline-block;

डेमो:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

यह भी देखें फिडल !

Answer 21

सबसे आसान तरीका:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Comments

जैसा कि आपके फिडेल नोटों में, #inner को उस पर एक चौड़ाई सेट करनी होती है।

— माइकल टेरी

#outerहमेशा डिफ़ॉल्ट width:100%;रूप से किसी भी आवश्यकता नहीं होती <div>है width:100%। और text-align:centerयह भी एक आवश्यक नहीं है।

— मोबारक अली

Answer 22

यदि सामग्री की चौड़ाई अज्ञात है, तो आप निम्न विधि का उपयोग कर सकते हैं । मान लें कि हमारे पास ये दो तत्व हैं:

• .outer -- पूर्ण चौड़ाई
• .inner - कोई चौड़ाई सेट नहीं (लेकिन अधिकतम-चौड़ाई निर्दिष्ट की जा सकती है)

मान लीजिए कि तत्वों की गणना चौड़ाई क्रमशः 1000 पिक्सेल और 300 पिक्सेल है। निम्नलिखित के रूप में आगे बढ़ें:

1. .innerअंदर लपेटो.center-helper
2. बनाओ .center-helperएक इनलाइन ब्लॉक; यह .inner300 पिक्सल्स चौड़े बनाने के समान आकार का हो जाता है ।
3. .center-helperअपने माता-पिता के सापेक्ष 50% सही धक्का ; यह इसके बाईं ओर 500 पिक्सल के wrt पर है। बाहरी।
4. पुश .inner50% अपनी मूल के सापेक्ष छोड़ दिया; यह अपने बाएँ -150 पिक्सेल के स्थान पर है। सेंटर हेल्पर जिसका मतलब है कि इसका लेफ्ट 500 - 150 = 350 पिक्सल है। बाहरी।
5. .outerक्षैतिज स्क्रॉलबार को रोकने के लिए छिपे हुए पर अतिप्रवाह सेट करें ।

डेमो:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Answer 23

आप ऐसा कुछ कर सकते हैं

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

यह भी #innerलंबवत संरेखित करेगा । यदि आप नहीं चाहते हैं, तो गुणों displayऔर vertical-alignसंपत्तियों को हटा दें ;

Answer 24

यहां आप सबसे छोटे तरीके से चाहते हैं।

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Comments

वह इसे लंबवत केंद्रित करता है।

— माइकल टेरी

Answer 25

पाठ-संरेखण: केंद्र

text-align: centerइनलाइन सामग्री को लागू करना लाइन बॉक्स के भीतर केंद्रित है। हालाँकि चूंकि आंतरिक div में डिफ़ॉल्ट रूप से width: 100%आपको एक विशिष्ट चौड़ाई निर्धारित करनी होती है या निम्न में से किसी एक का उपयोग करना होता है:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

मार्जिन: 0 ऑटो

का उपयोग करना margin: 0 autoएक और विकल्प है और यह पुराने ब्राउज़र संगतता के लिए अधिक उपयुक्त है। यह साथ काम करता है display: table।

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

flexbox

display: flexएक ब्लॉक तत्व की तरह व्यवहार करता है और फ्लेक्सबॉक्स मॉडल के अनुसार इसकी सामग्री को बाहर करता है। इसके साथ काम करता है justify-content: center।

कृपया ध्यान दें: फ्लेक्सबॉक्स अधिकांश ब्राउज़रों के साथ संगत है लेकिन सभी नहीं। ब्राउज़र संगतता की पूर्ण और अद्यतित सूची के लिए यहां देखें ।

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

परिवर्तन

transform: translateआपको सीएसएस दृश्य प्रारूपण मॉडल के समन्वय स्थान को संशोधित करने देता है। इसका उपयोग करते हुए, तत्वों का अनुवाद, घुमाया, बढ़ाया और तिरछा किया जा सकता है। क्षैतिज रूप से केंद्र में इसकी आवश्यकता होती है position: absoluteऔरleft: 50% ।

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

<center> (अनुचित)

टैग <center>HTML विकल्प है text-align: center। यह पुराने ब्राउज़र और अधिकांश नए पर काम करता है लेकिन यह एक अच्छा अभ्यास नहीं माना जाता है क्योंकि यह सुविधा अप्रचलित है और इसे वेब मानकों से हटा दिया गया है।

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Answer 26

आप display: flexअपने बाहरी div के लिए और क्षैतिज केंद्र के लिए उपयोग कर सकते हैं जिसे आपको जोड़ना हैjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

या आप अधिक विचारों के लिए w3schools - CSS flex प्रॉपर्टी पर जा सकते हैं ।

Answer 27

फ्लेक्स में 97% से अधिक ब्राउज़र समर्थन कवरेज है और कुछ लाइनों के भीतर इस तरह की समस्याओं को हल करने का सबसे अच्छा तरीका हो सकता है:

#outer {
  display: flex;
  justify-content: center;
}

Answer 28

खैर, मैं एक समाधान खोजने में कामयाब रहा जो शायद सभी स्थितियों में फिट होगा, लेकिन जावास्क्रिप्ट का उपयोग करता है:

यहाँ संरचना है:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

और यहाँ जावास्क्रिप्ट स्निपेट है:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

यदि आप इसे एक उत्तरदायी दृष्टिकोण में उपयोग करना चाहते हैं, तो आप निम्नलिखित जोड़ सकते हैं:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Answer 29

यह विधि भी ठीक काम करती है:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

भीतर के लिए <div>, केवल शर्त यह है कि इसका heightऔर widthइसके कंटेनर से बड़ा नहीं होना चाहिए।

Answer 30

एक विकल्प मौजूद था कि मैंने पाया:

उपयोग करने के लिए हर कोई कहता है:

margin: auto 0;

लेकिन एक और विकल्प है। इस गुण को पैरेंट डिव के लिए सेट करें। यह कभी भी पूरी तरह से काम करता है:

text-align: center;

और देखो, बच्चा केंद्र जाता है।

और अंत में आपके लिए CSS:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

Comments

पाठ-संरेखण अपने कंटेनर में पाठ संरेखण के लिए अपने कंटेनर के लिए अपने माता-पिता के लिए नहीं।

— ललित कुमार मौर्य

मैं इसका परीक्षण करता हूं, मैं सेट बच्चे के साथ समस्या करता हूं, जब आपके पास एक से अधिक बच्चे हों, तो अधिक बार मार्जिन: 0 ऑटो फ़ॉन्ट उत्तर, लेकिन, माता-पिता के लिए पाठ-संरेखित केंद्र, इस बच्चे को केंद्र बनाते हैं, भले ही वे तत्व और हों पाठ न हो, परीक्षण करें और देखें कि क्या होता है

— पन्सदेघी

केवल पाठ-संरेखण केंद्र पाठ। आप इस समय सही हैं, लेकिन जब आप एक कंटेनर सीएसएस लिखते हैं जिसमें अलग-अलग चौड़ाई वाला बच्चा होता है और आपका कोड काम नहीं करता है। इसे फिर से टेस्ट करें !!!!

— ललित कुमार मौर्य

इस उदाहरण को देखें jsfiddle.net/uCdPK/2 और मुझे बताएं कि आप इसके बारे में क्या सोचते हैं !!!!!

— ललित कुमार मौर्य 10