मार्जिन का उपयोग करना: ऑटो को लंबवत-संरेखित करना

Question

इसलिए मुझे पता है कि यदि हम उपयोग करते हैं तो हम क्षैतिज रूप से एक केंद्र को केंद्र में रख सकते हैं margin:0 auto;। margin:auto auto;काम करना चाहिए मुझे लगता है कि यह कैसे काम करना चाहिए? यह लंबवत रूप में भी केंद्रित है?

vertical-align:middle;काम क्यों नहीं करता है ?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Comments

फ्लेक्सबॉक्स के बारे में नीचे दिए गए @ zpr के उत्तर को पढ़ने और कार्यान्वित करने का अत्यधिक सुझाव दें। यह आज के रूप में काफी अच्छी तरह से समर्थित है और आपका सीएसएस बहुत, बहुत क्लीनर होगा।

— गोविंद राय

अगर ((नई तिथि ())। getFullYear ()> 2017) का उपयोग करेंFlexBox = true;

— ब्रैंडिटो

Answer 1

अद्यतन अगस्त 2020

यद्यपि नीचे अभी भी उपयोगी जानकारी के लिए पढ़ने लायक है, हमारे पास फ्लेक्सबॉक्स कुछ समय के लिए पड़ा है, इसलिए इस उत्तर के अनुसार बस इसका उपयोग करें ।

---

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

vertical-align:middleक्योंकि यह ब्लॉक-स्तरीय तत्वों पर लागू नहीं है

margin-top:autoऔर margin-bottom:autoक्योंकि उनके उपयोग किए गए मान शून्य के रूप में गणना करेंगे

margin-top:-50%क्योंकि प्रतिशत-आधारित मार्जिन मानों की गणना ब्लॉक रखने की चौड़ाई के सापेक्ष की जाती है

वास्तव में, दस्तावेज़ प्रवाह और तत्व ऊंचाई की गणना एल्गोरिदम की प्रकृति को इसके मूल के अंदर एक तत्व को केंद्रित करने के लिए मार्जिन का उपयोग करना असंभव बनाता है। जब भी एक ऊर्ध्वाधर मार्जिन का मूल्य बदला जाता है, तो यह मूल तत्व ऊंचाई की गणना फिर से गणना (पुनः-प्रवाह) करेगा, जो मूल तत्व के पुन: केंद्र को ट्रिगर करेगा ... यह एक अनंत लूप बनाता है।

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

इस तरह के कुछ वर्कअराउंड जो आपके परिदृश्य के लिए काम करते हैं; तीन तत्वों को इस तरह घोंसला बनाना पड़ता है:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle ब्राउसरशॉट के अनुसार ठीक काम करता है।

Comments

#एक नियम है जो केवल IE7 और उसके तहत व्याख्या किए गए नियम के साथ उपसर्ग करता है। आप इसके बजाय सशर्त टिप्पणियों आदि का उपयोग करके IE-विशिष्ट स्टाइलशीट में इन नियमों को शामिल करना पसंद कर सकते हैं

— ov

+1 कारणों का हवाला देते हुए कि ऐसा क्यों है, चौड़ाई के आधार पर मार्जिन प्रतिशत की गणना बहुत ही आंख खोलने वाली थी।

— 229 में

मुझे 'अनंत लूप' कथन के बारे में संदेह है।

— बरुण

मानवता चाँद के वर्षों पहले से ही है और हमें अभी भी इस बछड़े से निपटना है। एक ब्राउज़र में खड़ी चीजों को संरेखित करना, jesus

— user151496

> = = IE9 आयु position: absolute; top: 50%; transform: translateY(-50%);में भी संभव और काफी लोकप्रिय है ... (इसके विपरीत top:50%;margin: - $halfHeightआपको पहले से पता नहीं है ...)

— फ्रैंक नॉक

Answer 2

चूंकि यह सवाल 2012 में पूछा गया था और हम फ्लेक्सबॉक्स के लिए ब्राउज़र समर्थन के साथ एक लंबा रास्ता तय कर चुके हैं, मुझे लगा जैसे यह जवाब अनिवार्य था।

यदि आपके मूल कंटेनर का प्रदर्शन है flex, तो हाँ , margin: auto auto(भी रूप में जाना जाता है margin: auto) यह क्षैतिज या लंबवत दोनों को केंद्र में रखने के लिए काम करेगा, भले ही यह एक तत्व हो inlineया नहीं block।

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

ध्यान दें कि चौड़ाई / ऊँचाई बिल्कुल निर्दिष्ट नहीं की जानी चाहिए, क्योंकि इस उदाहरण में jfiddle जो व्यूपोर्ट के सापेक्ष आकार का उपयोग करता है।

यद्यपि फ्लेक्सबॉक्स के लिए ब्राउज़र समर्थन पोस्टिंग के समय एक सर्वकालिक उच्च पर है, कई ब्राउज़र अभी भी इसका समर्थन नहीं करते हैं या विक्रेता उपसर्गों की आवश्यकता होती है। अद्यतन ब्राउज़र समर्थन जानकारी के लिए http://caniuse.com/flexbox का संदर्भ लें ।

अपडेट करें

चूँकि इस उत्तर पर थोड़ा ध्यान दिया गया, इसलिए मैं यह भी बताना चाहूँगा कि marginयदि आप उपयोग कर रहे हैं तो आपको यह निर्दिष्ट करने की आवश्यकता नहीं है कि आप display: flexसभी तत्वों को कंटेनर में रखना चाहेंगे:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Comments

माता-पिता {प्रदर्शन: फ्लेक्स; } बच्चा {मार्जिन: ऑटो 0; } बस महान है।

— २३:२३ बजे कोक्रेस्जेबा

OMG यार, तुम एक रॉकस्टार आदमी हो, धिक्कार है कि मैं तुम्हें एक से अधिक बार नहीं उखाड़ सकता !!!

— पाइरेटऐप

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

— एरिक

यह 2018 में काम करने का सबसे अच्छा और सुरुचिपूर्ण समाधान है, धन्यवाद।

— सिल्वरसर्फर

मैं जोड़ना चाहूंगा कि मई 2018 तक, इस समाधान के साथ, पाठ IE 11 में बीच में लंबवत संरेखित नहीं होता है

— Yefu

Answer 3

यहां मैंने सबसे अच्छा समाधान पाया है: http://jsfiddle.net/yWnZ2/446/ क्रोम, फ़ायरफ़ॉक्स, सफारी, IE8-11 और एज में काम करता है।

यदि आपके पास एक घोषित height( height: 1em,, height: 50%आदि) है या यह एक ऐसा तत्व है जहां ब्राउज़र को ऊंचाई ( imgऔर svg, या canvasउदाहरण के लिए) पता है, तो आपको ऊर्ध्वाधर केंद्र की आवश्यकता है:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

आप आमतौर पर एक widthया max-widthतो निर्दिष्ट करना चाहते हैं ताकि सामग्री स्क्रीन / कंटेनर की पूरी लंबाई को खींच न सके।

यदि आप इसका उपयोग किसी ऐसे मोडल के लिए कर रहे हैं, जिसे आप हमेशा अन्य सामग्री के ओवरलैपिंग व्यूपोर्ट में केंद्रित करना चाहते हैं, तो position: fixed;इसके बजाय दोनों तत्वों के लिए उपयोग करें position: absolute। http://jsfiddle.net/yWnZ2/445/

यहाँ एक अधिक संपूर्ण लेखन है: http://codepen.io/shshaw/pen/gEiDt

Comments

यह आवश्यक रूप से अपने मूल तत्व में इसे केंद्र में नहीं रखता है। यदि आप इसे पृष्ठ के केंद्र में चाहते हैं तो अच्छा हैक।

— जोएल मेलन

बस position: relativeमाता-पिता में जोड़ें , और तत्व माता-पिता के भीतर केंद्रित होगा। यदि आप और अधिक पढ़ना चाहते हैं तो मैंने तकनीक के बारे में स्मैशिंग मैगज़ीन पर बहुत बड़ा राइटअप किया

— shshaw

कभी-कभी निरपेक्ष एक माता-पिता या दो अप (बनाम शरीर) पर आधारित होता है और रिश्तेदार एक भव्य या महान दादा दादी (बनाम माता-पिता) हो सकता है। हो सकता है कि जो लोग जानते हैं कि कब या क्यों होता है, इस तकनीक को बेहतर तरीके से नियंत्रित कर सकता है - मैंने वास्तव में उन मुद्दों पर कभी गौर नहीं किया है, लेकिन मुझे पता है कि निरपेक्ष से रिश्तेदार में बदलना इस काम को बनाने के लिए अपने आप में एक समाधान नहीं है। मैंने आपके लेख को थोड़ा सा पढ़ा है और ऐसा लगता है कि पूर्ण और सापेक्ष पहले पूर्ण या सापेक्ष पूर्वज तक जाते हैं, क्या यह सही है?

— जोएल मेलन

मैं थोड़ा धीमा हूं। मैं अभी आपकी टिप्पणी ऊपर पढ़ता हूं। मैंने ध्यान नहीं दिया कि आपने इसे जोड़ने के लिए कहा parent- मिल गया। बहुत बहुत धन्यवाद!

— जोएल मेलन

@commonpike IE8 / 9 के साथ एकमात्र समस्या है यदि आप display: tableचर ऊंचाई सामग्री के लिए उपयोग करते हैं। अन्यथा, इस विधि को उम्मीद के मुताबिक काम करना चाहिए। समग्र विवरण के लिए राइटअप के माध्यम से पढ़ें । आपको IE8 / 9 में पूर्ण दृश्य का परीक्षण करने में सक्षम होना चाहिए यह देखने के लिए कि क्या कोई समस्या है या नहीं।

— शशव

Answer 4

संपादित करें: यह 2020 है, मैं इसके बजाय फ्लेक्स बॉक्स का उपयोग करूंगा।

मूल उत्तर:

एचटीएमएल

<body>
  <div class="centered">
  </div>
</body>

सीएसएस

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

Comments

IE 8 और यानी के पुराने संस्करणों के लिए काम नहीं करेगा। चूंकि संस्करण 9.0 से और इसके बाद के संस्करण में उचितता समर्थित है (उपसर्ग -ms के साथ)। (अर्थात। 10 को उपसर्ग की आवश्यकता नहीं है)।

— DevWL

यह सच है, मैं IE8 के बारे में परवाह नहीं करता

— Gal Margalit

और लेखक ने अपने प्रश्न के लिए html5 को टैग किया

— gal

Answer 5

मुझे पता है कि सवाल 2012 से है, लेकिन मुझे अब तक का सबसे आसान तरीका मिला, और मैं साझा करना चाहता था।

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

और सीएसएस:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Answer 6

यदि आप उस केंद्र की ऊँचाई को जानते हैं , जिसे आप केंद्र में रखना चाहते हैं , तो आप इसे उसके माता-पिता के भीतर पूर्ण रूप से स्थित कर सकते हैं और फिर topमान सेट कर सकते हैं 50%। यह अपने माता-पिता के 50% बच्चे के शीर्ष पर डाल देगा, यानी बहुत कम। इसे इसकी margin-topआधी ऊँचाई पर सेट करके वापस खींच लें । तो अब आपके पास माता-पिता के ऊर्ध्वाधर मध्य बिंदु पर बैठे बच्चे के सिर के ऊर्ध्वाधर मध्य बिंदु है - लंबवत केंद्रित!

उदाहरण:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Comments

margin-topतत्व ऊंचाई के सापेक्ष% में सेट नहीं किया जा सकता है, इसलिए आप एक आयाम पर निर्भर फिक्स के साथ समाप्त होंगे

— ov

जो है ... वास्तव में मैंने अपने जवाब में क्या कहा? "यदि आप उस केंद्र की ऊंचाई जानना चाहते हैं जिसे आप केन्द्रित करना चाहते हैं"। और मैंने यह नहीं कहा कि ओपी को% का उपयोग करना चाहिए margin-top।

— टफ

मैं समाधान से असहमत हूं क्योंकि यह आपको एक पूर्व-परिभाषित तत्व ऊंचाई में बंद कर देता है - लेकिन आपकी टिप्पणी समझ में आती है। आपको लगता है कि जवाब में प्रतिबिंबित करने के लिए चाहते हो सकता है

— ov

ठीक है, मैंने आपके द्वारा अनदेखा किए गए भाग को बोल्ड कर दिया है, उम्मीद है कि अब यह स्पष्ट हो गया है।

— टफ

@ov: यदि तत्व में एक निश्चित ऊँचाई नहीं है, तो आप केवल गणना की ऊँचाई पाने के लिए JS का उपयोग कर सकते हैं और फिर उसके अनुसार ऋणात्मक शीर्ष मार्जिन सेट कर सकते हैं। यह मेरी राय में, अभी भी लंबवत केंद्र के लिए सबसे अच्छी विधि है।

— दाऊजी १४'१२

Answer 7

उन दो समाधानों में केवल दो नेस्टेड तत्वों की आवश्यकता होती है।
पहला - यदि सामग्री स्थिर (मैनुअल सेंटर) है तो सापेक्ष और पूर्ण स्थिति ।

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

या द्रव डिजाइन के लिए - इसके बजाय उदाहरण के लिए सटीक सामग्री केंद्र उपयोग के लिए:

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

https://jsfiddle.net/GlupiJas/w3jnjuv0/

अगर आपको विंडो की ऊंचाई 50% से अधिक होगी, तो आपको 'न्यूनतम ऊंचाई' सेट करनी होगी। आप मोबाइल और टैबलेट उपकरणों के लिए मीडिया क्वेरी के साथ इस ऊंचाई में हेरफेर भी कर सकते हैं। लेकिन केवल अगर आप उत्तरदायी डिजाइन के साथ खेलते हैं।

मुझे लगता है कि आप आगे जा सकते हैं और किसी कारण के लिए आवश्यकता होने पर न्यूनतम ऊंचाई या निश्चित ऊंचाई में हेरफेर करने के लिए सरल जावास्क्रिप्ट / JQuery स्क्रिप्ट का उपयोग कर सकते हैं।

दूसरा - यदि सामग्री द्रव है तो आप वर्टिकल अलाइनमेंट और टेक्स्ट-अलाइन सेंटर्ड के साथ टेबल और टेबल-सेल सीएसएस प्रॉपर्टीज का भी उपयोग कर सकते हैं:

/*in a wrapper*/  
display:table;   

तथा

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

वर्क्स और स्केल, अक्सर ग्रिड लेआउट और मीडिया क्वेरी के साथ उत्तरदायी वेब डिज़ाइन समाधान के रूप में उपयोग किया जाता है जो ऑब्जेक्ट की चौड़ाई में हेरफेर करता है।

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

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

https://jsfiddle.net/GlupiJas/4daf2v36/

मैं सटीक सामग्री केंद्र के लिए तालिका समाधान पसंद करता हूं, लेकिन कुछ मामलों में रिश्तेदार पूर्ण स्थिति बेहतर काम करेंगे, खासकर अगर हम सामग्री संरेखण का सटीक अनुपात नहीं रखना चाहते हैं।

Answer 8

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

Comments

क्या आप हमारे साथ साझा कर सकते हैं, यह समाधान कैसा है? इसके अलावा, मैं आपके "पॉपअप संदेश" को नीचे नहीं देखता

— एलेक्स

मुझे कुछ याद आया, लेकिन अब इसे बीच में लंबवत रखने के लिए परिष्कृत किया गया है। आप अभी देख सकते हैं।

— सीतलपाल सिंह

Answer 9

वहाँ एक आसान रास्ता div div खड़ी है जो हर स्थिति में चाल करना होगा नहीं है।

हालांकि, स्थिति के आधार पर इसे करने के बहुत सारे तरीके हैं।

यहाँ उनमें से कुछ हैं:

• उदाहरण के लिए मूल तत्व के ऊपर और नीचे की गद्दी सेट करें: 20px 0px 20px 0px
• तालिका, तालिका सेल केंद्रों की सामग्री को लंबवत रूप से उपयोग करें
• माता-पिता तत्व की स्थिति को सापेक्ष में सेट करें और जिस डिव को आप पूर्ण रूप से केंद्र में रखना चाहते हैं और उसे शीर्ष पर रखें: 50px; नीचे: 50px; उदाहरण के लिए

आप "सीएसएस वर्टिकल सेंटरिंग" के लिए भी गूगल कर सकते हैं

Answer 10

चर ऊंचाई, मार्जिन ऊपर और नीचे ऑटो

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

चर ऊंचाई, मार्जिन ऊपर और नीचे ऑटो

Answer 11

Flexbox का उपयोग करना:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

सीएसएस:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

परिणाम देख

Answer 12

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>