CSS
कार्यक्षेत्र केंद्रित

टिप्पणियों

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

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 की न्यूनतम ऊंचाई।