केंद्र को पूरी तरह से तैनात पैरेंट डिव के अंदर लंबवत केंद्र में कैसे रखें

Question

मैं गुलाबी एक के बीच में नीले कंटेनर प्राप्त करने की कोशिश कर रहा हूं, हालांकि ऐसा लगता vertical-align: middle;है कि उस मामले में काम नहीं करता है।

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

परिणाम:

उम्मीद:

कृपया सुझाव दें कि मैं इसे कैसे प्राप्त कर सकता हूं।

Jsfiddle

Comments

क्या कोई कारण है कि आप position: absoluteहर जगह उपयोग क्यों कर रहे हैं ?

— 13

vertical-align: middle;साथ काम करता है display: inline-blockया तालिका लेआउट

— ctf0

इस लिंक की जाँच करें: vanseodesign.com/css/vertical-centering ;)

— जोर्डी कास्टिला

@Vucko हाँ - यह बहुत ही जटिल लेआउट का सिर्फ सरलीकृत संस्करण है, लेकिन दोनों शीर्ष डिवीजनों में पूर्ण स्थिति महत्वपूर्ण है क्योंकि यह शर्त है।

— व्लादिमीर

@ व्लादिमीर मैं केवल इसके बारे में सोच सकता हूं margin-top: calc((56px - 16px) / 2), जहां 56px - parent height, 16px - element height/font-size- JSFiddle

— Vucko

Answer 1

सबसे पहले ध्यान दें कि vertical-alignकेवल तालिका कोशिकाओं और इनलाइन-स्तरीय तत्वों पर लागू होता है।

ऊर्ध्वाधर संरेखण प्राप्त करने के कुछ तरीके हैं जो आपकी आवश्यकताओं को पूरा कर सकते हैं या नहीं कर सकते हैं। हालाँकि मैं आपको अपने पसंदीदा में से दो तरीके दिखाऊंगा :

1. का उपयोग करना transformऔरtop

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

मुख्य बिंदु यह है कि एक प्रतिशत मान युक्त ब्लॉक के topसापेक्ष है height; जबकि transforms पर एक प्रतिशत मूल्य बॉक्स के आकार (बाउंडिंग बॉक्स) के सापेक्ष है।

यदि आप फ़ॉन्ट रेंडरिंग मुद्दों (धुंधली फ़ॉन्ट) का अनुभव करते हैं , तो फिक्स को घोषणा में जोड़ना perspective(1px)है, transformइसलिए यह बन जाता है:

transform: perspective(1px) translateY(-50%);

यह ध्यान देने योग्य है कि CSS transform IE9 + में समर्थित है ।

2. inline-blockतत्वों का उपयोग करना (छद्म-)

इस पद्धति में, हमारे पास दो सिबलिंग inline-blockतत्व हैं जो vertical-align: middleघोषणा के द्वारा मध्य में लंबवत रूप से संरेखित होते हैं ।

उनमें से एक heightमें 100%इसके माता-पिता हैं और दूसरा हमारा वांछित तत्व है जिसे हम इसे बीच में संरेखित करना चाहते थे।

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

अंत में, हमें इनलाइन-स्तरीय तत्वों के बीच के अंतर को दूर करने के लिए उपलब्ध तरीकों में से एक का उपयोग करना चाहिए ।

Comments

इस उपयोगी टिप्स के लिए धन्यवाद। यह मेरे प्रोजेक्ट के लिए काम कर रहा था। अच्छे काम करता है।

— सेदत कुमकु

पहली विधि के लिए valignतत्व होना चाहिएdisplay: block

— ओलेग

transform: translateY(-50%);इसे पहले कभी नहीं देखा गया, लेकिन यह त्रुटिपूर्ण रूप से काम करता है। वास्तविक जीवन रक्षक।

— बेनी बोटेमा

Answer 2

इसे इस्तेमाल करो :

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

इस लिंक को देखें: https://www.smashingmagazine.com/2013/08/absolute-horiolet-vertical-centering-css/

Comments

यह मुख्य समाधान कैसे नहीं है? इतना आसान और यह काम करता है!

— मेसन

यह ध्यान रखें कि heightइस कार्य के लिए संपत्ति को परिभाषित किया जाना चाहिए (px, em, आदि में)।

— वैदस

क्या होगा यदि मेरे पास माता-पिता के अंदर कई विभाग हैं? सब एक दूसरे के ऊपर नहीं रखा जाएगा?

— Psykid

यह काम नहीं करता है अगर वहाँ "निरपेक्ष केंद्र" के साथ एक ही स्तर पर एक और बच्चा है

— पास्कुट

Answer 3

अपनी सामग्री को केंद्र में रखने के लिए अपनी अनुपस्थित स्थित div में फ्लेक्स blox का उपयोग करें।

उदाहरण देखें https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?==view

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

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

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

Answer 4

केंद्र लंबवत और क्षैतिज रूप से:

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

Answer 5

आप उपयोग कर सकते हैं display:table/table-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}

<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>

Comments

धन्यवाद, आपका उदाहरण सही काम करता है, हालांकि .bगायब है position: absolute;जो अन्य चीजों को प्रदर्शित करने के लिए महत्वपूर्ण है, जो कि मैं कोड को साफ रखने के लिए शामिल नहीं था। मुझे पता है कि टेबल-सेल होने का कोई मतलब नहीं है, लेकिन शायद एक और दृष्टिकोण है जो position: absolute;दोनों .aऔर .bकक्षाओं में बनाए रखने की अनुमति देगा ?

— व्लादिमीर

यदि कोई पूर्ण स्थिति है, और b (बच्चा) इसे आकार दे रहा है, तो b स्वयं बाकी सामग्री की ओर पूर्ण स्थिति में है। जब तक एक को मानने के लिए अनिश्चित नहीं माना जाता है कि मैं पूर्ण के अंदर पूर्ण के उद्देश्य को नहीं समझता हूं?

— जी-साइरिलस

Answer 6

यहां टॉप ऑब्जेक्ट का उपयोग करने का सरल तरीका है।

उदाहरण: यदि निरपेक्ष तत्व का आकार 60px है।

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

Comments

का उपयोग करना calcसहायक है, हालांकि यह top: calc(50% - 30px)वास्तव में केंद्रित होना चाहिए।

— ब्रेनबैग

Answer 7

एक अतिरिक्त सरल उपाय

HTML:

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

---

सीएसएस:

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}

Answer 8

कृपया इस उत्तर को एक समान समस्या की जाँच करें।

यह अब तक का सबसे आसान तरीका है जो मैंने पाया है।

https://stackoverflow.com/a/26079837/4593442

ध्यान दें। मैंने प्रदर्शन का उपयोग किया : -webkit-flex; प्रदर्शन के बजाय : फ्लेक्स; सफारी के अंदर परीक्षण के लिए।

पाद लेख। मैं केवल एक नौसिखिया हूं, किसी ऐसे व्यक्ति से मदद साझा करना जो स्पष्ट रूप से अनुभवी है।

Answer 9

आप इसे display:table;पैरेंट डिव और display: table-cell; vertical-align: middle;चाइल्ड डिव में इस्तेमाल करके कर सकते हैं

<div style="display:table;">
      <div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;">
          <div style="background-color: lightblue; ">test</div>
      </div>
  </div>

Comments

यह संभव है कि आपका उत्तर अच्छा हो, लेकिन आप अपने कोड में जो कुछ भी करते हैं उसका कुछ विवरण जोड़कर इसे बेहतर बना सकते हैं ...

— DaFois