सीएसएस का उपयोग करके क्षैतिज रूप से पूर्ण div केंद्र कैसे करें?

Question

मैं एक div हूँ और यह क्षैतिज रूप से केंद्रित होना चाहता हूँ - हालांकि मैं दे रहा हूँ यह margin:0 auto;केंद्रित नहीं है ...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

Comments

डिव के केंद्र में पूर्णतया तैनात तत्व कैसे

— लोगनमज़

@LoganMzz ऐसा नहीं है क्योंकि इस प्रश्न की चौड़ाई ज्ञात है।

— दावबोग

Answer 1

आप स्थापित करने की आवश्यकता left: 0और right: 0।

यह निर्दिष्ट करता है कि विंडो के किनारों से मार्जिन किनारों को ऑफसेट करने के लिए कितनी दूर है।

'टॉप' की तरह, लेकिन यह निर्दिष्ट करता है कि बॉक्स के ब्लॉक वाले [राइट / लेफ्ट] एज के [बाएं / दाएं] के लिए बॉक्स का दायां मार्जिन एज कितना दूर है।

स्रोत: http://www.w3.org/TR/CSS2/visuren.html#position-props

नोट: तत्व में विंडो की तुलना में चौड़ाई कम होनी चाहिए, अन्यथा यह विंडो की पूरी चौड़ाई लेगा।

यदि आप एक न्यूनतम मार्जिन निर्दिष्ट करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं , और फिर autoबड़े स्क्रीन आकारों के लिए संक्रमण कर सकते हैं।

---

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Comments

नोट: widthएक चाहिए!

— इजास अमीनुडेनेन

हां। यह सही है ... "पाठ-संरेखित करें: केंद्र;" और "बाएं: 0; दाएं: 0;" क्षैतिज रूप से केंद्रित रखते हुए आपको एक पूर्ण स्थिति में ले जाने की अनुमति देगा।

— स्टर्लिंग बॉर्न

@ एलेक्स जी I ने IE11 में सिर्फ फिडेल को लोड किया है और यह काम करता है। क्या आप स्पष्ट कर सकते हो?

— ब्रायन वेबस्टर

@ एआईएक्सजी यह IE11 में काम करता है, हालांकि अगर आप चौड़ाई घोषित नहीं करते हैं तो यह काम नहीं करेगा । मुझे भी यही समस्या थी। आपको एक चौड़ाई का उपयोग करना होगा जैसा कि उदाहरण में दिखाया गया है।

— पनामा जैक

margin: autoहमारे मामले में काम करने के लिए भी इसकी जरूरत है

— क्रैशलॉट

Answer 2

यह IE8 में काम नहीं करता है, लेकिन विचार करने के लिए एक विकल्प हो सकता है। यह मुख्य रूप से उपयोगी है यदि आप एक चौड़ाई निर्दिष्ट नहीं करना चाहते हैं।

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Comments

यह शायद उनकी परियोजना की आवश्यकताओं पर निर्भर करेगा।

— क्रिश सेलबक

इस समय पर, सफारी में काम करने के लिए अभी भी एक नियम है, जो कि एक प्रकार का जानवर - उपसर्ग के साथ होना चाहिए।

— शिवकेडियल

दुर्भाग्य से यह किसी भी तरह से आसपास के div की पारदर्शिता को पाठ के अंदर भी लागू करता है ..

— dnl.re

यह निश्चित रूप से जवाब है। मेरे लिए, विशेष रूप से सेट चौड़ाई एक पूर्ण नहीं है।

— माइक

Answer 3

यद्यपि उपरोक्त उत्तर सही हैं, लेकिन इसे न्यूबॉकों के लिए सरल बनाने के लिए, आपको बस इतना करना चाहिए कि मार्जिन, बाएँ और दाएँ सेट है। निम्नलिखित कोड यह प्रदान करेगा कि चौड़ाई निर्धारित है और स्थिति निरपेक्ष है:

margin: 0 auto;
left: 0;
right: 0;

डेमो:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }

<div class="centeredBox">Centered Box</div>

Comments

इसने बूटस्ट्रैप कॉलम की एक पंक्ति में पूर्ण चित्रों के लिए एकदम सही काम किया

— ZachNag

Answer 4

Flexbox? आप flexbox का उपयोग कर सकते हैं।

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

Comments

यह वास्तव में मेरे अनूठे मामले के लिए खूबसूरती से काम किया। left: 0; right: 0;100% तक बढ़ाया गया, जो एक विकल्प नहीं था क्योंकि बाल तत्व की पृष्ठभूमि का रंग था, और left: 50%; transform: translateY(-50%);काम नहीं किया , क्योंकि इससे बच्चे को 50% चौड़ाई के लिए विवश होना पड़ा। यह एकमात्र समाधान था जो बच्चे के लचीले आयामों को संरक्षित करता था (केवल ब्राउज़र समर्थन तक सीमित)। धन्यवाद!

— बेन डायर

Answer 5

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

Answer 6

इतना आसान, केवल मार्जिन और बाएं, दाएं गुणों का उपयोग करें:

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

आप इस टिप में अधिक देख सकते हैं => html- Obinb ब्लॉग में div एलिमेंट को सेंटर में कैसे सेट करें

Answer 7

यहाँ एक लिंक है, अगर स्थिति निरपेक्ष है तो केंद्र में div बनाने के लिए इसका उपयोग करें।

HTML:

<div class="bar"></div>

सीएसएस:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

उदाहरण jsfiddle

Answer 8

आप तत्वों margin:auto;पर उपयोग नहीं कर सकते position:absolute;हैं, बस इसे हटा दें यदि आपको इसकी आवश्यकता नहीं है, हालांकि, यदि आप करते हैं, तो आप left:30%;अधिकतम (और मान) के लिए ((100% -40%) / 2) और मीडिया प्रश्नों का उपयोग कर सकते हैं :

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}