सभी ब्राउज़रों के लिए div को लंबवत केंद्र कैसे बनाएं?

1367

मैं divसीएसएस के साथ एक लंबवत केंद्र करना चाहता हूं । मुझे टेबल या जावास्क्रिप्ट नहीं चाहिए, लेकिन केवल शुद्ध सीएसएस। मुझे कुछ समाधान मिले, लेकिन वे सभी इंटरनेट एक्सप्लोरर 6 का समर्थन नहीं कर रहे हैं।

<body>
    <div>Div to be aligned vertically</div>
</body>

मैं divइंटरनेट एक्सप्लोरर 6 सहित सभी प्रमुख ब्राउज़रों में एक ऊर्ध्वाधर केंद्र कैसे बना सकता हूं ?

css  cross-browser  alignment  vertical-alignment  centering 
— बुरक एर्डेम
स्रोत
25
@MarcoDemaio क्या यहां लगातार लोग tablesलेआउट के लिए नहीं आते हैं?
— चुड 37
14
@ चुड 37: यह निर्भर करता है कि आपको क्या करना है, लेआउट के लिए टेबल आमतौर पर कोड में टाइप करने के लिए बहुमुखी और लंबे नहीं होते हैं, सीएसएस के साथ आप आसानी से 2 कॉल लेआउट को 3/4/5 तल के लेआउट आदि में बदल सकते हैं, लेकिन इस मामले में एक अलग क्रॉस-ब्राउज़र तालिका के साथ पूरा किया जा सकता है कि इस तरह के एक सरल कार्य के लिए दर्जनों सीएसएस टिप्स-एंड-ट्रिक्स का उपयोग करना अलग है, यह दरवाजे का उपयोग करने के बजाय खिड़की के माध्यम से अपने घर में प्रवेश करने का प्रयास करने जैसा है।
— मार्को डेमायो
मामले में लोग पुराने ब्राउज़र समर्थन की परवाह नहीं करते: davidwalsh.name/css-vertical-center
— करोलिस rolarapnickis
1
css-vertical-center.com ब्राउज़र संगतता जानकारी के साथ कुछ समाधान हैं
— एस्केप 24
2
यहाँ इसे करने के कई तरीके हैं css-tricks.com/centering-css-complete-guide
— माइकल युरिन

जवाबों:

1374

नीचे सबसे अच्छा सर्वांगीण समाधान है जो मैं खड़ी और क्षैतिज रूप से एक निश्चित-चौड़ाई, लचीली ऊंचाई सामग्री बॉक्स के केंद्र में बना सकता हूं । यह फ़ायरफ़ॉक्स, ओपेरा, क्रोम और सफारी के हाल के संस्करणों के लिए परीक्षण और काम कर रहा था।

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>
स्निपेट का विस्तार करें

डायनामिक कंटेंट के साथ एक कार्यकारी उदाहरण देखें

मैंने लचीलेपन का परीक्षण करने के लिए कुछ गतिशील सामग्री का निर्माण किया और यह जानना अच्छा लगेगा कि क्या किसी को इसके साथ कोई समस्या दिखाई देती है। यह केंद्रित ओवरले के लिए भी अच्छी तरह से काम करना चाहिए - लाइटबॉक्स, पॉप-अप, आदि।

— Billbad
स्रोत
"निरपेक्ष" बाहरी डीआईवी के बिना, पृष्ठ पर कोई भी सामग्री इससे पहले कि वह पूरे ब्लॉक को नीचे धकेल देगी। यह इसे अन्य पृष्ठ सामग्री से अधिक स्वतंत्र बनाता है।
— 17
9
.outer {position:absolute;width:100%;height:100%}आवश्यक नहीं है, वे यहाँ केवल प्रदर्शन के लिए हैं। हम सभी की जरूरत है display:table, अगर कोई भी उलझन में है जैसा कि मैं था।
— गफलेस
मैंने देखा है कि स्क्रॉल बार से बचने के लिए इसे 99% की आवश्यकता है। अधिक महत्वपूर्ण है, केवल पहले दो divs के साथ इस काम करता है, का कहना है कि रखें .outerऔर middleस्पष्ट रूप से और उपेक्षा .innerऔर अपनी शैली। मुझे नहीं पता कि क्या बात है margin-left, margin-rightऑटो पर सेट क्योंकि यह तत्व को क्षैतिज रूप से केंद्र नहीं करता है ?? !!!
— user10089632
निकाल रहा है width: 100%;और जोड़ने margin: 0 autoके लिए .outerचर चौड़ाई के रूप में अच्छी तरह से की अनुमति देता है।
— रोकोको
@ user10089632 नहीं, यह चौड़ाई या ऊंचाई का मुद्दा नहीं है, बल्कि स्थिति का है। top: 0; left 0;गायब है, कम से कम क्रोम में जो डिफ़ॉल्ट के लिए सेट करता है 1.
— Michał Woli Novski
280

एक और मैं सूची में नहीं देख सकता:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • क्रॉस-ब्राउज़र (इंटरनेट एक्सप्लोरर 8 सहित - इंटरनेट एक्सप्लोरर 10 हैक के बिना!)
  • प्रतिशत और न्यूनतम के साथ उत्तरदायी / अधिकतम-
  • पैडिंग की परवाह किए बिना केंद्रित (बॉक्स-आकार के बिना!)
  • heightघोषित किया जाना चाहिए (देखें परिवर्तनशील ऊँचाई )
  • overflow: autoकंटेंट स्पिलओवर को रोकने के लिए अनुशंसित सेटिंग (ओवरफ्लो देखें)

स्रोत: सीएसएस में पूर्ण क्षैतिज और ऊर्ध्वाधर केंद्र

— Yisela
स्रोत
7
यह मेरे लिए काम करता है, लेकिन मुझे किसी कारण के लिए क्रोम में एक निश्चित चौड़ाई और ऊंचाई की आवश्यकता है
— रयान नेल
1
धन्यवाद। मुझे एक फिक्स की आवश्यकता थी जहां मुझे px ऊंचाई या चौड़ाई की गणना करने की आवश्यकता नहीं थी और यह पूरी तरह से काम करता था।
— GFoley83
8
महान समाधान, विशेष रूप से क्योंकि आपको माता-पिता की आवश्यकता नहीं है
— Luca Steeb
1
यह एक खिंचाव करता है यदि ऊँचाई तय नहीं है, तो इसके अलावा: अच्छा समाधान
— बार्ट बर्ग
यदि आपके पास एक चौड़ाई और ऊंचाई है जो 100% नहीं है, तो उपयोग करेंmargin: auto;
— चार्ल्स एल।
253

सबसे आसान तरीका सीएसएस की निम्नलिखित 3 पंक्तियाँ होंगी :

1) स्थिति: रिश्तेदार;

2) शीर्ष: 50%;

3) रूपांतर: TranslY (-50%);

निम्नलिखित एक उदाहरण है :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
स्निपेट का विस्तार करें

— DrupalFever
स्रोत
4
नोट: अगर बाहरी div की ऊंचाई "न्यूनतम ऊंचाई: 170px" के साथ सेट की जाती है तो सही काम नहीं करता है
— बार्ट बर्ग
3
Z- इंडेक्स के साथ हस्तक्षेप
— ripper234
4
heightबाहरी होने पर काम नहीं करता divहै 100%। तब केवल साथ काम करता है position: absolute;।
— आर्क लिनक्स टक्स
1
मुझे यह समाधान पहले कहीं और मिला था, लेकिन विशेष रूप से -webkit-transformवैरिएंट का उल्लेख करने के लिए इस विशेष उत्तर के अतिरिक्त कुडोस, जिन्हें मुझे इस पद्धति को प्रेतवाद में काम करने की आवश्यकता थी ... संघर्ष के घंटे समाप्त हो गए इसलिए धन्यवाद!
— ड्राम्ब्रेवर
2
यह सबसे अच्छा जवाब है। यह अविश्वसनीय रूप से सरल है, मौजूदा काम और कार्यों की कम से कम राशि के साथ गड़बड़ करता है जहां तक ​​IE9 जो अब भी कोई भी उपयोग नहीं करता है। चलो इस आदमी को कुछ और upvotes मिलता है!
— निक स्टील
136

वास्तव में आपको ऊर्ध्वाधर केंद्र के लिए दो div की आवश्यकता होती है। सामग्री वाले div में चौड़ाई और ऊंचाई होनी चाहिए।

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
स्निपेट का विस्तार करें

यहाँ परिणाम है

— वादिम ओविचिनिकोव
स्रोत
4
यह एक पुरानी चाल है ... शीर्ष 50% और आंतरिक अंतर के लिए शीर्ष मार्जिन नकारात्मक आधी ऊंचाई
— मैनटैक्स
34
यह मानते हुए कि आपके पास div के लिए एक निश्चित ऊंचाई है। जब ऊँचाई बदल सकती है तो काम न करें।
— आंद्रे फिग्यूएरेडो
116

अब फ्लेक्सबॉक्स समाधान आधुनिक ब्राउज़रों के लिए बहुत आसान तरीका है, इसलिए मैं आपके लिए यह सलाह देता हूं:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
स्निपेट का विस्तार करें

— संतोष खलसे
स्रोत
1
यदि आपको एक मिल गया है navbar, तो आप ऊंचाई का उपयोग करके height: calc(100% - 55px)या जो भी आपकी ऊंचाई है , उसे ट्वीक कर सकते हैं navbar।
— एड्रियन
मुझे भी शरीर से हाशिये / पैडिंग को हटाना पड़ा
— बेन
के साथ अच्छी तरह से काम करता है float। धन्यवाद।
— अमीर ए। शबानी
कृपया ध्यान दें कि यह संभावित रूप से "नए पुराने" मोबाइल सफारी ब्राउज़रों पर अजीब व्यवहार करेगा। ऊंचाई के बजाय अनुशंसित उपयोग .container वर्ग पर फ्लेक्स-आधारित है
— नौ मैजिक
78

संपादित करें 2020: केवल इस का उपयोग करें यदि आपको IE8 जैसे पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है (जिसे आपको 😉 करने से इनकार करना चाहिए)। यदि नहीं, तो flexbox का उपयोग करें।

यह सबसे आसान तरीका है जो मैंने पाया है और मैं हर समय इसका उपयोग करता हूं ( jsFiddle डेमो यहां )

इस लेख के लिए CSS ट्रिक्स से क्रिस कॉयर को धन्यवाद ।

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
स्निपेट का विस्तार करें

समर्थन IE8 से शुरू होता है।

— आर्मल लारिसर
स्रोत
पुराने ब्राउज़रों के लिए समर्थन से इनकार करते हुए, मेरे लिए समाधान फ्लेक्सबॉक्स नहीं बल्कि ग्रिड सिस्टम था। यह मेरे लिए कंटेनर में केंद्र सामग्री के लिए थोड़ा कष्टप्रद था, जब यह ऊंचाई में बहुत छोटा हो जाता है, तो स्क्रॉलबार दिखाने की आवश्यकता होती है, और केंद्रित सामग्री अन्य सभी तरीकों से स्क्रॉल क्षेत्र को खो रही थी। कंटेनर में मैं सिर्फ उपयोग करता हूं: {डिस्प्ले: ग्रिड; संरेखित-आइटम: केंद्र; } आशा है कि यह किसी की मदद करता है।
— दोपहर
63

काफी खोजबीन के बाद आखिरकार मुझे इसका अंतिम हल मिल गया। यह फ्लोटेड तत्वों के लिए भी काम करता है। स्रोत देखें 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
स्रोत
4
यह वास्तव में अच्छी तरह से काम करता है, बशर्ते आपको याद हो कि कंटेनर तत्व में एक अंतर्निहित या स्पष्ट ऊंचाई होनी चाहिए; jsfiddle.net/14kt53un सीएसएस के लिए अपेक्षाकृत नए लोगों के लिए एक मामूली गौचा।
— मार्टिन शूल
6
सभी उत्तरों में से, यह सबसे सरल है! मुझे आशा है कि अन्य लोग भी आपके उत्तर को देखेंगे! धन्यवाद! वैसे, 50%मेरे लिए काम किया (नहीं -50%)
— Codesee
वह अविश्वसनीय था। घंटों खोज के बाद, यह एक मेरे लिए काम किया। मुझे TranslY (50%) का उपयोग करना था मुझे यकीन है कि क्यों, लेकिन यह काम किया। मेरे मामले में, माता-पिता को एईएम फॉर्म इंजन द्वारा बनाया गया था, और मैं केवल कुछ बाल तत्वों को नियंत्रित कर सकता हूं।
— tarekahf
41

फ्लेक्सबॉक्स समाधान

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
स्निपेट का विस्तार करें

— रेगी पिंकम
स्रोत
3
नोट justify-content: centerक्षैतिज रूप में अच्छी तरह से आइटम केंद्र करेगा
— पीटर बर्ग
36

पृष्ठ पर div को केन्द्रित करने के लिए, फिडेल लिंक को देखें ।

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
स्निपेट का विस्तार करें

एक अन्य विकल्प फ्लेक्स बॉक्स का उपयोग करना है, फिडल लिंक की जांच करें ।

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>
स्निपेट का विस्तार करें

एक और विकल्प CSS 3 ट्रांसफॉर्म का उपयोग करना है:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
स्निपेट का विस्तार करें

— Nerdroid
स्रोत
3
@ArmelLarcier यह गलत है। सापेक्ष इकाइयाँ प्रतिशत हैं %, emएस और remएस। निरपेक्ष या निश्चित मान पिक्सेल या बिंदु हैं। आप जिसका उल्लेख कर रहे हैं, वह "केवल घोषित ऊंचाई के साथ काम करता है"। हॉवेवर, हालांकि Moes द्वारा वर्णित इस पद्धति को एक ऊंचाई की आवश्यकता होती है, जब आप इसे सापेक्ष इकाइयों में घोषित करते हैं, तो प्रतिशत सबसे अच्छा होता है, कोई फर्क नहीं पड़ता कि केंद्रित DIV के अंदर कितनी सामग्री है कि DIV अपनी सामग्री को फिट करने के लिए लंबवत विस्तार करेगा। यही इस पद्धति की सुंदरता है। दूसरी अच्छी बात यह है कि यह विधि IE8 / 9/10 में काम करती है अगर किसी को अभी भी उन ब्राउज़रों का समर्थन करने की आवश्यकता है।
— रिकार्डो ज़िया
@ricardozea मेरा मतलब जिद्दी खेलना नहीं है, लेकिन यह कहना कि केन्द्रित div लंबवत विस्तारित होगी, जबकि शेष लंबवत गलत है। कोशिश करो। मुझे पता है कि जब मैं कहता हूं कि ऊंचाई "निश्चित" होनी चाहिए, तो यह सही शब्द नहीं है। यह वास्तव में अपने माता-पिता के सापेक्ष है। वैसे भी मुझे लगता है कि क्रिस कॉयर की विधि अधिक समझ में आती है, मेरा उत्तर देखें stackoverflow.com/a/21919578/1491212 यह IE8 के साथ संगत है और बिना किसी निर्दिष्ट आयाम वाले तत्व पर काम करता है।
— आर्मेल लारिसर
1
@ArmelLarcier यह सब अच्छा है। गलत नहीं है भाई। इसे आज़माएँ: codepen.io/shshaw/pen/gEiDt - हरे बॉक्स में पैराग्राफ जोड़ें]]। दी, यह प्रभाव को पूरा करने के लिए मॉडर्निज़्र का उपयोग करता है, लेकिन सभी में यह संभव है। मैंने आपके उत्तर और CSS-Tricks.com पोस्ट को भी देखा, लेकिन यह विधि मुझे खुश नहीं करती है, यह अतिरिक्त मार्कअप का उपयोग करती है और सीएसएस बहुत अधिक क्रिया है। मुझे लगता है कि सबसे अच्छा समाधान या तो flexbox या transform: translate(-50%, -50%);तकनीक का उपयोग कर रहा है। IE8 के लिए मैं बस इसे शीर्ष / केंद्र संरेखित करके छोड़ दूंगा और आगे बढ़ूंगा।
— रिकार्डो ज़िया
1
@ricardozea खैर आप "डिस्प्ले: टेबल" विधि और अतिरिक्त मार्कअप का उपयोग करने के लिए जुड़े कोडपाइन तो मुझे आश्चर्य नहीं हुआ। वैसे भी, अपने अंतिम वाक्य के लिए +1।
— आर्मेल लारिसर
23

सबसे आसान समाधान नीचे है:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
स्निपेट का विस्तार करें

— वर्षा धडगे
स्रोत
2
वास्तव में सबसे आसान अभी तक :), हालांकि, मुझे शरीर के बजाय शैलियों को बाहरी-डिव पर सेट करना पड़ा।
— बाबूराव
21

दुर्भाग्य से - लेकिन आश्चर्यजनक रूप से नहीं - समाधान एक से अधिक जटिल है कि यह होना चाहेगा। दुर्भाग्य से, आपको उस div के चारों ओर अतिरिक्त div का उपयोग करने की आवश्यकता होगी जो आप लंबवत केंद्रित करना चाहते हैं।

मोज़िला, ओपेरा, सफारी आदि जैसे मानकों के अनुरूप ब्राउज़रों के लिए, आपको बाहरी div को एक तालिका के रूप में प्रदर्शित करने के लिए सेट करने की आवश्यकता है और आंतरिक div को तालिका-सेल के रूप में प्रदर्शित किया जाना है - जो तब लंबवत केंद्रित हो सकता है। इंटरनेट एक्सप्लोरर के लिए, आपको बाहरी div के भीतर आंतरिक div को बिल्कुल स्थिति में रखने की आवश्यकता है और फिर 50% के रूप में शीर्ष निर्दिष्ट करें । निम्नलिखित पृष्ठ इस तकनीक को अच्छी तरह से समझाते हैं और कुछ कोड नमूने भी प्रदान करते हैं:

जावास्क्रिप्ट का उपयोग करके ऊर्ध्वाधर केंद्र करने की एक तकनीक भी है। जावास्क्रिप्ट और सीएसएस के साथ सामग्री का ऊर्ध्वाधर संरेखण इसे प्रदर्शित करता है।

— sids
स्रोत
20

यदि कोई व्यक्ति Internet Explorer 10 (और बाद में) का उपयोग करता है, तो flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>
स्निपेट का विस्तार करें

Flexbox समर्थन: http://caniuse.com/flexbox

— bravedick
स्रोत
Android <4.4 समर्थन नहीं करता है align-items: center;!
— एंड्रे फिडलर
वास्तव में, यह संरेखित वस्तुओं का समर्थन करता है: केंद्र; caniuse.com/#search=align-items
— t.mikael.d
@ t.mikael.d आप उस तालिका को करीब से देख सकते हैं। Android <4.4 के लिए, यह बताता है कि "केवल पुराने फ्लेक्सबॉक्स विनिर्देश का समर्थन करता है और रैपिंग का समर्थन नहीं करता है।"
— नाथन उस्मान
15

किसी तत्व को लंबवत रूप से केन्द्रित करने का एक आधुनिक तरीका उपयोग करना होगा flexbox।

आपको ऊंचाई और बच्चे को केंद्र में रखने के लिए माता-पिता की आवश्यकता होती है।

नीचे दिया गया उदाहरण आपके ब्राउज़र के भीतर एक div को केंद्र में रखेगा। क्या महत्वपूर्ण है (मेरे उदाहरण में) स्थापित करने के लिए है height: 100%करने के लिए bodyऔर htmlउसके बाद और min-height: 100%आपके कंटेनर में।

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
स्निपेट का विस्तार करें

— Marwelln
स्रोत
14

केवल लंबवत केन्द्रित करना

यदि आप इंटरनेट एक्सप्लोरर 6 और 7 के बारे में परवाह नहीं करते हैं, तो आप एक ऐसी तकनीक का उपयोग कर सकते हैं जिसमें दो कंटेनर शामिल हैं।

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

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

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

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

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

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

आप किसी भी सामग्री को उसकी चौड़ाई या ऊंचाई की परवाह किए बिना सामग्री बॉक्स में जोड़ सकते हैं!

डेमो:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.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">
        Malcolm in the Middle
     </div>
   </div>
</div>
स्निपेट का विस्तार करें

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

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

यदि आप क्षैतिज और लंबवत दोनों को केंद्र में रखना चाहते हैं, तो आपको निम्नलिखित की भी आवश्यकता है।

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

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

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

  • उदाहरण के लिए text-align: left;या text-align: right;जब तक आप केंद्रित नहीं होना चाहते, तब तक क्षैतिज पाठ-संरेखण को फिर से समायोजित करना चाहिए

डेमो:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>
स्निपेट का विस्तार करें

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

— जॉन सेलर्स
स्रोत
13 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>
स्निपेट का विस्तार करें

संबंधित: एक छवि केंद्र

— antelove
स्रोत
10

यह हमेशा वह जगह है जहां मैं जाता हूं जब मुझे इस मुद्दे पर वापस आना होता है ।

उन लोगों के लिए जो कूदना नहीं चाहते हैं:

  1. position:relativeया के रूप में मूल कंटेनर निर्दिष्ट करेंposition:absolute ।
  2. चाइल्ड कंटेनर पर एक निश्चित ऊंचाई निर्दिष्ट करें।
  3. सेट position:absoluteऔरtop:50% बच्चे कंटेनर पर माता-पिता के बीच में शीर्ष नीचे ले जाने के।
  4. मार्जिन-टॉप सेट करें: -यहाँ जहां आइटम को ऑफसेट करने के लिए बाल कंटेनर की आधी ऊंचाई है।

कोड में इसका एक उदाहरण:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
— Ninx
स्रोत
9

CSS की फ्लेक्स प्रॉपर्टी का उपयोग करना।

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
स्निपेट का विस्तार करें

या का उपयोग करके display: flex;औरmargin: auto;

कोड स्निपेट दिखाएं

पाठ केंद्र दिखाएं

कोड स्निपेट दिखाएं

प्रतिशत (%) ऊँचाई और चौड़ाई का उपयोग करना।

कोड स्निपेट दिखाएं

— दीपू रघुनाथ
स्रोत
8

मैंने अभी इस CSS को लिखा है और अधिक जानने के लिए, कृपया इस लेख के माध्यम से जाएँ: यह आलेख CSS की सिर्फ 3 पंक्तियों के साथ कुछ भी संरेखित करता है ।

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
— संजीब देबनाथ
स्रोत
1
सीएसएस रूपांतर पाठ और सीमाओं में विकृतियों का कारण बन सकते हैं (जब गणित का परिणाम भिन्नात्मक पिक्सल में होता है)।
— नाथन के
5

नए साथियों के लिए कृपया प्रयास करें 

display: flex;
align-items: center;
justify-content: center;
— उस्मान मैं
स्रोत
1
कृपया एक स्टैक स्निपेट जोड़ें जिसमें दिखाया गया है कि यह CSS कोड लंबवत रूप से कैसे संरेखित करता है div।
— Heretic बंदर
यह भी काम करता है <div style="display:flex"><div style="margin:auto">Inner</div></div>
— idrisadetunmbi
मैं संरेखित वस्तुओं की इस अद्भुत व्याख्या के साथ आया और सामग्री को सही ठहराता हूं। जरूर पढ़े: stackoverflow.com/questions/42613359/…
— Usman I
4

बिलबाद से उत्तर केवल .innerdiv की एक निश्चित चौड़ाई के साथ काम करता है । यह समाधान div की विशेषता text-align: centerको जोड़कर एक गतिशील चौड़ाई के लिए काम करता है .outer।

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
स्निपेट का विस्तार करें

— रूवेन
स्रोत
दिलचस्प! मैं लगभग समान तकनीक का उपयोग कर रहा हूँ! -> stackoverflow.com/questions/396145/…
— John Slegers
4

कोड के तीन पंक्तियों का उपयोग transformआधुनिक ब्राउज़रों और इंटरनेट एक्सप्लोरर पर व्यावहारिक रूप से काम करता है:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

जब से मुझे इस उत्तर के पिछले संस्करण में कुछ अपूर्णता मिली (और स्टैक ओवरफ्लो मुझे टिप्पणी करने की अनुमति नहीं देगा) मैं इस उत्तर को जोड़ रहा हूँ।

  1. 'स्थिति' सापेक्ष स्टाइल को गड़बड़ कर देती है यदि वर्तमान डिव शरीर में है और कोई कंटेनर डिव नहीं है। हालांकि 'निश्चित' काम करने लगता है, लेकिन यह स्पष्ट रूप से व्यूपोर्ट के केंद्र में सामग्री को ठीक करता है स्थिति: रिश्तेदार

  2. इसके अलावा, मैंने कुछ ओवरले डिव को केन्द्रित करने के लिए इस स्टाइल का उपयोग किया और पाया कि मोज़िला में इस रूपांतरित डिव के अंदर सभी तत्वों ने अपनी निचली सीमाओं को खो दिया था। संभवतः एक प्रतिपादन मुद्दा। लेकिन उनमें से कुछ में केवल न्यूनतम पैडिंग को जोड़कर इसे सही ढंग से प्रस्तुत किया। क्रोम और इंटरनेट एक्सप्लोरर (आश्चर्यजनक रूप से) ने पैडिंग की आवश्यकता के बिना बक्से को प्रदान किया आंतरिक पैडिंग के बिना मोज़िला पैडिंग्स के साथ मोज़िला

— MandarK
स्रोत
3

निम्न लिंक अपने सीएसएस में सिर्फ 3 लाइनों के साथ करने का एक सरल तरीका प्रस्तुत करता है:

सीएसएस की सिर्फ 3 लाइनों के साथ कुछ भी संरेखित करें ।

इसका श्रेय : सेबस्टियन एकस्ट्रोम को ।

मुझे पता है कि सवाल पहले से ही एक जवाब है, लेकिन मैंने इसकी सादगी के लिए लिंक में उपयोगिता देखी।

— Hicaro
स्रोत
3

ब्राउज़र संगतता के लिए उत्तर नहीं दे रहा है, लेकिन नई ग्रिड का भी उल्लेख करता है और इतना नया फ्लेक्सबॉक्स सुविधा का नहीं।

ग्रिड

से: मोज़िला - ग्रिड प्रलेखन - लंबवत रूप से div संरेखित करें

ब्राउज़र समर्थन: ग्रिड ब्राउज़र समर्थन

सीएसएस:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

flexbox

ब्राउज़र समर्थन: फ्लेक्सबॉक्स ब्राउज़र समर्थन

सीएसएस:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
— ctekk
स्रोत
3

मुझे लगता है कि फ्लेक्सबॉक्स का उपयोग किए बिना सभी ब्राउज़रों के लिए एक ठोस समाधान - "संरेखित-आइटम: केंद्र;" प्रदर्शन का एक संयोजन है: तालिका और ऊर्ध्वाधर-संरेखण: मध्य ;;

सीएसएस

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

एचटीएमएल

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

:Demo: https://jsfiddle.net/6m640rpp/

— मार्टिन विटेके
स्रोत
2

मैंने इसे इसके साथ किया (परिवर्तन चौड़ाई, ऊंचाई, मार्जिन-टॉप और मार्जिन-बाएं तदनुसार):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
— Netuddki
स्रोत
केवल तभी अच्छा होगा जब आप अपने केंद्र की कोशिश कर रहे DIV की चौड़ाई / ऊँचाई को जानते हैं। यह वही नहीं है जो सवाल पूछ रहा है
— egr103
2

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

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
— महेंद्र लिया
स्रोत
2

विशेष रूप से रिश्तेदार (अज्ञात) ऊंचाई के साथ माता-पिता के लिए, अज्ञात समाधान में केंद्र मेरे लिए बहुत अच्छा काम करता है। लेख में कुछ बहुत अच्छे कोड उदाहरण हैं।

यह क्रोम, फ़ायरफ़ॉक्स, ओपेरा और इंटरनेट एक्सप्लोरर में परीक्षण किया गया था।

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

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>
स्निपेट का विस्तार करें

— रूवेन
स्रोत
2

बस यह करें div: अपने वर्ग जोड़ें :

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

और इस लेख को स्पष्टीकरण के लिए पढ़ें । नोट: Heightआवश्यक है।

— अंशुल
स्रोत
2

एक चाल है जो मुझे हाल ही में पता चली है: आपको उपयोग करने की आवश्यकता है top 50%और फिर आप एक कोशिश करते हैंtranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
स्निपेट का विस्तार करें

— Melchia
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.