एक div के भीतर चर ऊंचाई के साथ लंबवत केंद्र सामग्री कैसे?

Question

जब सामग्री की ऊँचाई परिवर्तनशील हो, तो किसी div की सामग्री को लंबवत तरीके से केन्द्रित करने का सबसे अच्छा तरीका क्या है। मेरे विशेष मामले में, कंटेनर div की ऊंचाई तय की गई है, लेकिन यह बहुत अच्छा होगा यदि कोई समाधान होता है जो उन मामलों में काम करेगा जहां कंटेनर की चर ऊंचाई भी है। इसके अलावा, मैं सीएसएस हैक और / या गैर-अर्थ मार्कअप के साथ, या बहुत कम उपयोग के साथ एक समाधान पसंद करूंगा।

Comments

उस लेख की विधि सफारी (4.0.5) में गिरती है: S

@ ripper234 बिल्कुल नहीं, क्योंकि यह सवाल चर ऊंचाई div के बारे में है

— रौली राजंडे

साथ ही, यह सवाल पहले पूछा गया था।

— गुई इमामुरा

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

— रेतीजोशी

Answer 1

बस जोड़ दो

position: relative;
top: 50%;
transform: translateY(-50%);

आंतरिक div को।

यह जो करता है वह आंतरिक div की शीर्ष सीमा को बाहरी div ( top: 50%;) की आधी ऊंचाई तक ले जाता है और फिर आंतरिक div को उसकी ऊँचाई के आधे भाग ( transform: translateY(-50%)) तक बढ़ा देता है । इस के साथ काम करेंगे position: absoluteया relative।

ध्यान रखें कि transformऔर translateविक्रेता उपसर्ग जो सादगी के लिए शामिल नहीं हैं।

कोडपेन: http://codepen.io/anon/pen/ZYprdb

Comments

बस आश्चर्य है कि यह क्रोम और फ़ायरफ़ॉक्स पर क्यों काम करता है, लेकिन सफारी के लिए नहीं। तब मैंने देखा कि अधिकांश transformसंबंधित सामान -webkit-उपसर्ग है और अब यह काम करता है। तो बस एक अनुस्मारक के रूप में: -webkit-उपसर्ग भी जोड़ने के लिए मत भूलना ।

— मिहो

आपके लिए उपसर्गों को संभालने के लिए github.com/postcss/autoprefixer जैसे टूल का उपयोग करें ।

— जेमी चोंग

यह उत्तर सबसे ऊपर होना चाहिए।

— जोस फ़ेती

यह बहुत अधिक upvotes होना चाहिए! वैसे, यह भी काम करता है position: absolute, है ना?

— caw

Chrome में इस विधि का दुर्भाग्यपूर्ण दुष्प्रभाव है - यदि आपके रैपर में विषम संख्या में पिक्सेल हैं, तो translateयह सब कुछ धुंधला कर देगा क्योंकि यह सब कुछ पर .5px ऊंचाई को संभालने की कोशिश करता है।

— कीथ

Answer 2

यह इस समस्या का सबसे अच्छा समाधान प्रतीत होता है, जब तक कि आपका ब्राउज़र ::beforeछद्म तत्व का समर्थन करता है : CSS-Tricks: अज्ञात में केंद्रित ।

यह किसी भी अतिरिक्त मार्कअप की आवश्यकता नहीं है और बहुत अच्छी तरह से काम करने लगता है। मैं display: tableविधि का उपयोग नहीं कर सका क्योंकि tableतत्व max-heightसंपत्ति का पालन ​​नहीं करते हैं।

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Comments

अब -t- एक -BRILLIANT- समाधान है। इस पोस्ट के लिए बहुत बहुत धन्यवाद!

— ट्रॉय अल्फोर्ड

अन्य उत्तर के साथ, यह बहुत अच्छा होगा यदि यह दृष्टिकोण का वर्णन करता है और लिंक से कोड शामिल करता है।

— केटीके

+1, यह समाधान वास्तव में काफी सरल है! Btw आप जोड़ सकते हैं .block { white-space: nowrap; font-size: 0; line-height: 0; }और छद्म तत्व पर नकारात्मक सही मार्जिन छोड़ सकते हैं , आपको बस fs और lh को .centered पर रीसेट करना होगा ... इस तरह आप यह सुनिश्चित करते हैं कि तत्व व्यूपोर्ट (और डॉन की तुलना में व्यापक है) 'imo को थोड़ा गन्दा नकारात्मक मार्जिन का उपयोग करना है)।

— साइमन

@jessegavin - आपकी राय में ... आपके द्वारा बताए गए दृष्टिकोण के खिलाफ निम्नलिखित स्टैक अप कैसे करता है: stackoverflow.com/questions/396145/…

— pulkitsinghal

इसके अलावा, यह तब टूटता है जब बाहरी कंटेनर .block की ऊंचाई के बजाय न्यूनतम ऊंचाई होती है।

— लिंकन बी

Answer 3

यह कुछ ऐसा है जो मुझे कई बार करने की आवश्यकता है और एक सुसंगत समाधान के लिए अभी भी आपको थोड़ा गैर-अर्थ मार्कअप और कुछ ब्राउज़र विशिष्ट हैक जोड़ने की आवश्यकता है। जब हमें css 3 के लिए ब्राउज़र सपोर्ट मिलता है, तो आप बिना किसी पाप के अपने ऊर्ध्वाधर केंद्र को प्राप्त करेंगे।

तकनीक की बेहतर व्याख्या के लिए आप उस लेख को देख सकते हैं जिसे मैंने इसे अनुकूलित किया है , लेकिन मूल रूप से इसमें एक अतिरिक्त तत्व जोड़ना और IE और ब्राउज़र में विभिन्न शैलियों को लागू करना शामिल है जो position:table\table-cellगैर-तालिका तत्वों का समर्थन करते हैं।

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

ब्राउज़रों के विशिष्ट सेटों में शैलियों को लागू करने के कई तरीके (हैक) हैं। मैंने सशर्त टिप्पणियों का उपयोग किया लेकिन दो अन्य तकनीकों को देखने के लिए ऊपर दिए गए लेख को देखें।

नोट: यदि आप पाठ की एक पंक्ति, या कई अन्य मामलों में केंद्र की कोशिश कर रहे हैं, तो आपको पहले से कुछ ऊंचाइयों को जानने के लिए ऊर्ध्वाधर केंद्र प्राप्त करने के सरल तरीके हैं। यदि आपके पास अधिक विवरण हैं, तो उन्हें फेंक दें क्योंकि एक विधि हो सकती है जिसमें ब्राउज़र हैक या गैर-अर्थ मार्कअप की आवश्यकता नहीं होती है।

अद्यतन: हम CSS3 के लिए बेहतर ब्राउज़र समर्थन प्राप्त करना शुरू कर रहे हैं, दोनों फ्लेक्स-बॉक्स ला रहे हैं और ऊर्ध्वाधर सेंटरिंग (अन्य प्रभावों के बीच) के लिए वैकल्पिक तरीकों के रूप में बदल रहे हैं। आधुनिक तरीकों के बारे में अधिक जानकारी के लिए यह अन्य प्रश्न देखें , लेकिन ध्यान रखें कि CSS3 के लिए ब्राउज़र समर्थन अभी भी स्केच है।

Comments

हाँ, मैंने आज उस लेख को पाया और अपनी विशेष स्थिति के लिए काम नहीं कर पाया। शायद मुझे उस पर और गौर करने की जरूरत है।

— जेसेगैविन

शायद आप उस कोड को पोस्ट कर सकते हैं जो आप उपयोग कर रहे हैं जो काम नहीं करता है?

— क्रिस मैराती-जॉर्ज

क्या यह अभी भी इस समस्या का सबसे अच्छा समाधान है?

— ripper234

यह आलेख Chrome 23, फ़ायरफ़ॉक्स 16 और IE 9. पर काम नहीं करता है। यह उत्तर एक बेहतर समाधान प्रतीत होता है।

— फर्नांडो कोर्रेया

नहीं, वह लेख अभी भी नवीनतम क्रोम और फ़ायरफ़ॉक्स में 24 फरवरी, 2013 तक काम करता है

— OMA

Answer 4

बच्चे के चयनकर्ता का उपयोग करते हुए, मैंने ऊपर Fadi के अविश्वसनीय उत्तर को लिया है और इसे केवल एक सीएसएस नियम में उबाला है जिसे मैं लागू कर सकता हूं। अब मुझे केवल उन contentCenteredतत्वों को वर्ग नाम जोड़ना है जिन्हें मैं केंद्र में रखना चाहता हूं:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

Forked CodePen: http://codepen.io/dougli/pen/Eeysg

Comments

ठंडा। साझा करने के लिए धन्यवाद। सावधानी के एक नोट यह है कि *चयनकर्ता स्वीकृत उत्तर की तुलना में खराब प्रदर्शन करने वाला है। एक मुद्दा नहीं हो सकता है, लेकिन ध्यान देने योग्य है। stevesouders.com/blog/2009/06/18/simplifying-css-selectors

— jessegavin

धन्यवाद। हाँ, यह शायद बदतर प्रदर्शन करेगा, लेकिन आजकल CSS नियम शायद चीजों को ज्यादा प्रभावित नहीं करते हैं। हम शायद > divइसके बजाय का चयन करके इसमें सुधार कर सकते हैं । calendar.perfplanet.com/2011/...

— dougli

सरल और महान। मेरे लिए पूरी तरह से काम करता है।

— लव्रो

Answer 5

मेरे लिए अब तक का सर्वश्रेष्ठ परिणाम:

div केंद्रित होने के लिए:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Comments

एक आकर्षण की तरह काम किया

— m4heshd

Answer 6

आप मार्जिन ऑटो का उपयोग कर सकते हैं। फ्लेक्स के साथ, डिव को लंबवत भी केंद्रित किया गया लगता है।

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Comments

प्रदर्शन: फ्लेक्स अभी भी व्यावहारिक रूप से एक प्रयोगात्मक विशेषता है; कोई भी ब्राउज़र इसे सही ढंग से नहीं

— बताता है

Answer 7

मेरे लिए ऐसा करने का सबसे अच्छा तरीका है:

.container{
  position: relative;
}

.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

फायदा यह नहीं है कि ऊंचाई स्पष्ट हो

Answer 8

यह divएक गतिशील (प्रतिशत) ऊंचाई के साथ मेरा भयानक समाधान है ।

सीएसएस

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

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

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

एचटीएमएल

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

यह अपने आप से कोशिश करो।

Answer 9

आप नीचे दिए गए कोड जैसे फ्लेक्स डिस्प्ले का उपयोग कर सकते हैं:

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>