बूटस्ट्रैप में एक कंटेनर को लंबवत कैसे केंद्र करें?

Question

मैं लंबवत केंद्र की राह देख रहा हूं container div को अंदर jumbotronऔर पृष्ठ के मध्य में सेट करने के ।

.jumbotronपूरी ऊंचाई और स्क्रीन की चौड़ाई के लिए अनुकूलित किया जाना है। .containerDiv की चौड़ाई है 1025pxऔर पेज (खड़ी बीच में) के बीच में होना चाहिए।

मैं चाहता हूं कि यह पृष्ठ जंबोट्रॉन को स्क्रीन की ऊंचाई और चौड़ाई के साथ-साथ कंटेनर के लंबवत केंद्र के साथ जंबोट्रॉन के अनुकूल बनाए। मैं इसे कैसे प्राप्त कर सकता हूं?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

Comments

उत्तरदायी केंद्रित स्तंभों पर यह देखें minimit.com/articles/solutions-tutorials/...

— Gothburz

css-vertical-center.com ब्राउज़र संगतता जानकारी के साथ कुछ समाधान हैं

— एस्केपनेट

Answer 1

लचीला बॉक्स तरीका है

लचीले बॉक्स लेआउट के उपयोग से ऊर्ध्वाधर संरेखण अब बहुत सरल है । आजकल, यह विधि इंटरनेट एक्सप्लोरर 8 और 9 को छोड़कर वेब ब्राउज़रों की एक विस्तृत श्रृंखला में समर्थित है, इसलिए हमें कुछ हैक्स / पॉलीफ़िल या विभिन्न तरीकों का उपयोग करने की आवश्यकता होगी IE8 / 9 के लिए ।

निम्नलिखित में मैं आपको दिखाऊंगा कि पाठ की केवल 3 पंक्तियों में (पुराने फ्लेक्सबॉक्स सिंटैक्स की परवाह किए बिना) कैसे करें ।

नोट:.jumbotron ऊर्ध्वाधर संरेखण को प्राप्त करने के लिए परिवर्तन करने के बजाय एक अतिरिक्त वर्ग का उपयोग करना बेहतर है । मैं vertical-centerउदाहरण के लिए वर्ग नाम का उपयोग करता हूँ ।

उदाहरण यहाँ (A दर्पण आईना jsbin पर) ।

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

महत्वपूर्ण नोट्स (डेमो में माना जाता है) :

1. या गुणों का एक प्रतिशत मान मूल तत्व के सापेक्ष है , इसलिए आपको स्पष्ट रूप से माता-पिता को निर्दिष्ट करना चाहिए ।heightmin-heightheightheight

2. संक्षिप्तता के कारण पोस्ट किए गए स्निपेट में पूर्वनिर्मित / पुराना फ्लेक्सबॉक्स सिंटैक्स छोड़ा गया, लेकिन ऑनलाइन उदाहरण में मौजूद है।

3. कुछ पुराने वेब ब्राउज़र जैसे कि फ़ायरफ़ॉक्स 9 ^{(जिसमें मैंने परीक्षण किया है)} , फ्लेक्स कंटेनर - .vertical-centerइस मामले में - माता-पिता के अंदर उपलब्ध स्थान नहीं लेगा, इसलिए हमें widthसंपत्ति को निर्दिष्ट करने की आवश्यकता है : जैसे width: 100%।

4. ऊपर उल्लिखित कुछ वेब ब्राउज़र में भी, फ्लेक्स आइटम - .containerइस मामले में - क्षैतिज रूप से केंद्र में दिखाई नहीं दे सकता है। ऐसा लगता है कि फ्लेक्स आइटम पर लागू बाएं / दाएं marginका autoकोई प्रभाव नहीं है।
   इसलिए हमें इसे संरेखित करने की आवश्यकता है box-pack / justify-content।

आगे के विवरण और / या स्तंभों के ऊर्ध्वाधर संरेखण के लिए, आप नीचे दिए गए विषय का उल्लेख कर सकते हैं:

• ऊर्ध्वाधर-संरेखित करें बूटस्ट्रैप 3 के साथ

---

विरासत वेब ब्राउज़रों के लिए पारंपरिक तरीका

यह पुराना उत्तर है जो मैंने उस समय लिखा था जब मैंने इस प्रश्न का उत्तर दिया था। इस पद्धति पर यहां चर्चा की गई है और यह इंटरनेट एक्सप्लोरर 8 और 9 में भी काम करने वाली है। मैं इसे संक्षेप में समझाता हूँ:

इनलाइन प्रवाह में, एक इनलाइन स्तर के तत्व को vertical-align: middleघोषणा द्वारा मध्य में लंबवत रूप से जोड़ा जा सकता है । से युक्ति W3C :

मध्य
माता-पिता बॉक्स की आधार रेखा के साथ बॉक्स के ऊर्ध्वाधर मध्य बिंदु को संरेखित करें और माता-पिता की आधी एक्स-ऊंचाई।

ऐसे मामलों में, जब .vertical-centerइस मामले में अभिभावक - तत्व स्पष्ट है height, किसी भी संयोग से यदि हमारे पास heightमाता-पिता के बिल्कुल समान बच्चे तत्व हो सकते हैं , तो हम माता-पिता की आधार रेखा को पूर्ण के मध्य में ले जा सकेंगे। -हाइट चाइल्ड और आश्चर्यजनक रूप से हमारे वांछित इन-फ्लो बच्चे - .container- को केंद्र में लंबवत संरेखित करें।

सभी का साथ मिल रहा है

किया जा रहा है ने कहा कि, हम भीतर एक पूर्ण ऊंचाई तत्व बना सकते हैं .vertical-centerद्वारा ::beforeया ::afterछद्म तत्वों और भी डिफ़ॉल्ट को परिवर्तित displayयह के प्रकार और अन्य बच्चे, .containerकरने के लिए inline-block।

फिर vertical-align: middle;इनलाइन तत्वों को लंबवत रूप से संरेखित करने के लिए उपयोग करें।

हेयर यू गो:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

काम कर रहा डेमो ।

इसके अलावा, अतिरिक्त छोटे स्क्रीन में अप्रत्याशित समस्याओं को रोकने के लिए, आप करने के लिए छद्म तत्व की ऊंचाई रीसेट कर सकते हैं autoया 0या उसके बदलने displayके लिए प्रकार noneयदि ऐसा है तो जरूरत:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

अद्यतन डेमो

एक और बात:

देखते हैं अगर footer/ headerकंटेनर के आसपास वर्गों, यह स्थिति यह है कि ठीक से तत्वों के लिए बेहतर है ( relative, absolute? आप पर निर्भर है।) और एक उच्च जोड़ने z-indexउन्हें दूसरों के शीर्ष पर हमेशा रखने के लिए मूल्य (आश्वासन के लिए)।

Comments

आइए इस चर्चा को चैट में जारी रखें

— user1012181

यह सब अच्छी तरह से और अच्छा है, लेकिन जैसे ही आप display: flexएक में जोड़ते हैं .container, यह बच्चे .rowको बाहर फ्लिप करने का कारण बनता है। ऐसा लगता है कि फ्लेक्सबॉक्स रास्ता इसलिए हमें कुछ मुख्य बूटस्ट्रैप सुविधाओं का उपयोग करने की आवश्यकता होगी?

— अब्राहम ब्रुक्स

Answer 2

अपडेट 2019

बूटस्ट्रैप 4 में फ्लेक्सबॉक्स शामिल है, इसलिए ऊर्ध्वाधर केंद्र की विधि बहुत आसान है और इसके लिए अतिरिक्त सीएसएस की आवश्यकता नहीं है ।

बस d-flexऔर align-items-centerउपयोगिता वर्गों का उपयोग करें ..

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

महत्वपूर्ण: ऊर्ध्वाधर केंद्रित ऊंचाई के सापेक्ष है । जिन आइटमों को आप केंद्र में लाने का प्रयास कर रहे हैं, उनके मूल कंटेनर की ऊंचाई एक निर्धारित होनी चाहिए । यदि आप पृष्ठ का उपयोग या माता-पिता की ऊंचाई चाहते हैं ! उदाहरण के लिए:vh-100min-vh-100

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

---

इसे भी देखें: बूटस्ट्रैप 4 में वर्टिकल एलाइन सेंटर

Answer 3

Bootstrap.css को जोड़ें और फिर इसे अपने css में जोड़ें

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
}

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

Comments

html और शरीर {ऊंचाई: 100%; } कुंजी है

— xxxbence

Answer 4

में बूटस्ट्रैप 4 :

बच्चे को क्षैतिज रूप से केन्द्रित करने के लिए , बूटस्ट्रैप -4 वर्ग का उपयोग करें:

justify-content-center

बच्चे को केंद्र में रखने के लिए , बूटस्ट्रैप -4 वर्ग का उपयोग करें:

 align-items-center

लेकिन याद रखें कि इन जैसे बूटस्ट्रैप -4 उपयोगिता वर्ग के साथ डी-फ्लेक्स वर्ग का उपयोग करना न भूलें

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

नोट: यदि यह कोड काम नहीं करता है तो बूटस्ट्रैप -4 उपयोगिताओं को जोड़ना सुनिश्चित करें

मुझे पता है कि यह इस सवाल का सीधा जवाब नहीं है लेकिन यह किसी की मदद कर सकता है

Comments

यह सिर्फ ज़िम के जवाब की नकल करने के लिए प्रतीत होता है।

— टायलरएच

Answer 5

मेरी पसंदीदा तकनीक:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

---

डेमो

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

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

Answer 6

IE, फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया गया।

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

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

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

Https://css-tricks.com/centering-css-complete-guide/ पर मिला

Answer 7

के लिए bootstrap4 कुछ आइटम के ऊर्ध्वाधर केंद्र

डी-फ्लेक्स फ्लेक्स नियमों के लिए

फ्लेक्स-स्तंभआइटम पर ऊर्ध्वाधर दिशा के लिए

केंद्र के लिए औचित्य-सामग्री-केंद्र

शैली = 'ऊँचाई: 300px;' सेट पॉइंट्स के लिए होना चाहिए जहां केंद्र कैल्क हो या एच -100 वर्ग का उपयोग करें

फिर क्षैतिज केंद्र div d- फ्लेक्स औचित्य-सामग्री-केंद्र और कुछ कंटेनर के लिए

इसलिए हमारे पास 3 टैग की श्रेणी है: div-column -> div-row -> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div> 

Comments

यह सिर्फ ज़िम के जवाब की नकल करने के लिए प्रतीत होता है।

— टायलरएच

Answer 8

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं, तो आपको बस 2 divs जोड़ना होगा:

.jumbotron{
  height:100%;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

कक्षाएं: डी-टेबल, डी-टेबल-सेल, डब्ल्यू -100, एच -100 और संरेखित-मध्य कार्य करेंगे

Answer 9

कंटेनर क्लास दें

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

उस डिव को दें जो कंटेनर के अंदर हो:

align-content: center;

इस div के अंदर की सभी सामग्री पृष्ठ के मध्य में दिखाई देगी।

Answer 10

यहां वह तरीका है जो मैं संरेखित सामग्री के लिए लंबवत उपयोग कर रहा हूं - बूटस्ट्रैप 3 पंक्तियों के साथ शीर्ष / केंद्र / नीचे। समान ऊंचाई के साथ बूटस्ट्रैप 3 कॉलम और लंबवत संरेखित करें।

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

यहाँ एक JSFiddle डेमो है।