खोज…


टिप्पणियों

इसका उपयोग तब किया जाता है जब तत्व के आयाम ( width और height ) ज्ञात या गतिशील नहीं होते हैं।

अन्य सभी विकल्पों पर फ्लेक्सबॉक्स का उपयोग करना पसंद करें क्योंकि यह यूजर इंटरफेस डिजाइन के लिए अनुकूलित है।

प्रदर्शन के साथ केंद्रित: तालिका

HTML:

<div class="wrapper">
    <div class="outer">
        <div class="inner">
            centered
        </div>
    </div>
</div>

सीएसएस:

.wrapper {
  height: 600px;
  text-align: center;
}
.outer {
  display: table;
  height: 100%;
  width: 100%;
}
.outer .inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ट्रांसफॉर्मेशन के साथ केंद्रित

HTML:

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

सीएसएस:

.wrapper {
  position: relative;
  height: 600px;
}
.centered {
  position: absolute;
  z-index: 999;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

Flexbox के साथ केंद्रित

HTML:

<div class="container">
    <div class="child"></div>
</div>

सीएसएस:

.container {
  height: 500px;
  width: 500px;
  display: flex;              // Use Flexbox
  align-items: center;        // This centers children vertically in the parent.
  justify-content: center;    // This centers children horizontally.
  background: white;
}

.child {
  width: 100px;              
  height: 100px;
  background: blue;
}

लाइन ऊंचाई के साथ केंद्रित पाठ

HTML:

<div class="container">
    <span>vertically centered</span>
</div>

सीएसएस:

.container{
    height: 50px;           /* set height */
    line-height: 50px;      /* set line-height equal to the height */
    vertical-align: middle; /* works without this rule, but it is good having it explicitly set */ 
}

नोट: यह विधि केवल पाठ की एक पंक्ति को लंबवत केंद्र में रखेगी । यह ब्लॉक तत्वों को सही ढंग से केंद्र में नहीं रखेगा और यदि पाठ एक नई पंक्ति पर टूटता है, तो आपके पास पाठ की दो बहुत लंबी लाइनें होंगी।

स्थिति के साथ केंद्रित: निरपेक्ष

HTML:

<div class="wrapper">
  <img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

सीएसएस:

.wrapper{
   position:relative;
   height: 600px;
}
.wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

यदि आप अन्य छवियों को केंद्र में रखना चाहते हैं, तो आपको उस तत्व को ऊंचाई और चौड़ाई देनी होगी।

HTML:

<div class="wrapper">
  <div class="child">
     make me center
  </div>
</div>

सीएसएस:

.wrapper{
   position:relative;
   height: 600px;
}
.wrapper .child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 30px;
  border: 1px solid #f00;
}

छद्म तत्व के साथ केंद्रित

HTML:

<div class="wrapper">
  <div class="content"></div>
</div>

सीएसएस:

.wrapper{
   min-height: 600px;
}

.wrapper:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.content {
  display: inline-block;
  height: 80px;
  vertical-align: middle;
}

यह विधि उन मामलों में सबसे अच्छी तरह से उपयोग की जाती है, जहां आपके पास एक विविध-ऊंचाई है। .content अंदर .wrapper केंद्रित है; और आप चाहते हैं .wrapper 'का विस्तार करने के लिए जब रों ऊंचाई .content की ऊंचाई से अधिक .wrapper की न्यूनतम ऊंचाई।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow