CSS => केंद्रित

CSS ट्रांसफ़ॉर्मेशन का उपयोग करना

सीएसएस ट्रांसफॉर्म तत्वों के आकार पर आधारित होते हैं, इसलिए यदि आपको नहीं पता कि आपका तत्व कितना लंबा या चौड़ा है, तो आप इसे किसी रिश्तेदार कंटेनर के ऊपर और बाएं से बिल्कुल 50% की स्थिति में ला सकते हैं और इसे 50% छोड़ दिया और ऊपर से अनुवाद कर सकते हैं। इसे लंबवत और क्षैतिज रूप से केंद्रित करने के लिए।

ध्यान रखें कि इस तकनीक के साथ, तत्व अंत में एक गैर-पूर्णांक पिक्सेल सीमा पर प्रदान किया जा सकता है, जिससे यह धुंधला दिखाई देता है। इस उत्तर को SO में वर्कअराउंड के लिए देखें।

एचटीएमएल

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

सीएसएस

.container {
  position: relative;
}

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

JSFiddle में उदाहरण देखें

क्रॉस ब्रास कम्पेटिबिलिटी

परिवर्तनशील संपत्ति को पुराने ब्राउज़रों द्वारा समर्थित उपसर्गों की आवश्यकता होती है। क्रोम <= 35, सफारी <= 8, ओपेरा <= 22, Android ब्राउज़र <= 4.4.4, और IE9 के लिए उपसर्ग आवश्यक हैं। CSS ट्रांसफॉर्म IE8 और पुराने संस्करणों द्वारा समर्थित नहीं हैं।

यहाँ पिछले उदाहरण के लिए एक आम परिवर्तन घोषणा है:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

अधिक जानकारी के लिए canIuse देखें।

अधिक जानकारी

तत्व को पहले गैर-स्थिर माता-पिता ( position: relative , absolute या fixed ) के अनुसार रखा जा रहा है। इस फिडेल और इस प्रलेखन विषय में अधिक अन्वेषण करें।

क्षैतिज-केवल केंद्रित के लिए, left: 50% उपयोग करें left: 50% और transform: translateX(-50%) । वही वर्टिकल-ओनली सेंटरिंग के लिए जाता है: सेंटर विद top: 50% एंड transform: translateY(-50%) ।

केंद्रित करने की इस पद्धति के साथ एक गैर-स्थैतिक चौड़ाई / ऊंचाई तत्वों का उपयोग करने से केंद्रित तत्व स्क्विट दिखाई दे सकता है। यह ज्यादातर पाठ वाले तत्वों के साथ होता है, और इसे जोड़कर तय किया जा सकता है: margin-right: -50%; और margin-bottom: -50%; । अधिक जानकारी के लिए इस फिडेल को देखें।

फ्लेक्सबॉक्स का उपयोग करना

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

सीएसएस:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

परिणाम देख

HTML:

<img src="http://lorempixel.com/400/200" />

सीएसएस:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

परिणाम देख

Flexbox पर अधिक विवरण और शैलियों का क्या अर्थ है, इसके लिए Flexbox प्रलेखन के तहत डायनामिक वर्टिकल और हॉरिज़ॉन्टल सेंटरिंग देखें।

ब्राउज़र का समर्थन

फ्लेक्सबॉक्स 10 से पहले IE संस्करणों को छोड़कर सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

कुछ हालिया ब्राउज़र संस्करणों, जैसे कि सफारी 8 और IE10 को वेंडर उपसर्गों की आवश्यकता होती है ।

उपसर्गों को उत्पन्न करने के एक त्वरित तरीके के लिए एक तृतीय-पक्ष उपकरण है ऑटोप्रेक्सिफ़र ।

पुराने ब्राउज़रों (जैसे IE 8 और 9) के लिए एक पॉलीफ़िल उपलब्ध है ।

फ्लेक्सबॉक्स ब्राउज़र समर्थन के बारे में अधिक विस्तृत जानकारी के लिए, यह उत्तर देखें।

स्थिति का उपयोग करना: निरपेक्ष

पुराने ब्राउज़रों में काम करना (IE> = 8)

स्वचालित मार्जिन, जो left और right या top और bottom ऑफसेट के लिए शून्य के मान के साथ जोड़ा जाता है, अपने माता-पिता के भीतर बिल्कुल तैनात तत्वों को केंद्र में रखेगा।

परिणाम देख

एचटीएमएल

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

सीएसएस

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

ऐसे तत्व जिनकी अपनी अंतर्निहित चौड़ाई और ऊँचाई नहीं है जैसे चित्र करते हैं, उन मानों को परिभाषित करने की आवश्यकता होगी।

अन्य संसाधन: सीएसएस में पूर्ण केंद्र

भूत तत्व तकनीक (मिशेल Cernernow हैक)

कंटेनर के आयाम अज्ञात होने पर भी यह तकनीक काम करती है।

कंटेनर के अंदर एक "भूत" तत्व सेट करें जो कि 100% ऊंचाई पर केंद्रित हो, फिर vertical-align: middle जो कि दोनों पर केंद्रित हो और तत्व केंद्रित हो।

सीएसएस

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

एचटीएमएल

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

पाठ-संरेखण का उपयोग करना

सबसे आम और सबसे आसान प्रकार का केंद्र एक तत्व में पाठ की पंक्तियों का है। CSS में नियम text-align: center इस उद्देश्य के लिए text-align: center :

एचटीएमएल

<p>Lorem ipsum</p>

सीएसएस

p {
    text-align: center;
}

यह पूरे ब्लॉक तत्वों को केंद्रित करने के लिए काम नहीं करता है । text-align संरेखण अपने मूल ब्लॉक तत्व में पाठ की तरह केवल इनलाइन सामग्री के संरेखण को नियंत्रित करता है।

टाइपोग्राफी अनुभाग में text-align बारे में अधिक देखें।

किसी अन्य वस्तु के संबंध में केंद्रित होना

हम देखेंगे कि किसी निकट तत्व की ऊंचाई के आधार पर सामग्री को कैसे केंद्र में रखा जाए।

संगतता: IE8 +, अन्य सभी आधुनिक ब्राउज़र।

एचटीएमएल

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

सीएसएस

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

JSFiddle से लिंक करें

मुख्य बिंदु 3 .thumb , .details और .details .position-container कंटेनर हैं:

.position-container में display: table होना चाहिए।
.details की वास्तविक चौड़ाई सेट width: .... होनी चाहिए width: .... और display: table-cell , vertical-align: middle ।
.thumb width: 100% होनी चाहिए width: 100% यदि आप चाहते हैं कि यह शेष सभी जगह ले जाएगा और यह .details चौड़ाई से प्रभावित होगा।
छवि (यदि आप एक छवि है) के अंदर .thumb होना चाहिए width: 100% , लेकिन अगर आप सही अनुपात है यह आवश्यक नहीं है।

कोड की 3 पंक्तियों के साथ ऊर्ध्वाधर कुछ भी संरेखित करें

IE11 + द्वारा समर्थित

परिणाम देख

व्यावहारिक रूप से सब कुछ ऊर्ध्वाधर संरेखित करने के लिए इन 3 लाइनों का उपयोग करें। बस यह सुनिश्चित करें कि आप जिस दिव्य / छवि का कोड लागू करते हैं, उसके पास माता-पिता का कद है।

सीएसएस

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

एचटीएमएल

<div class="vertical">Vertical aligned text!</div>

ऊर्ध्वाधर रूप से div के अंदर एक छवि संरेखित करें

एचटीएमएल

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

सीएसएस

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

टेबल लेआउट का उपयोग करते हुए क्षैतिज और ऊर्ध्वाधर केंद्र

table डिस्प्ले प्रॉपर्टी का उपयोग करके कोई बच्चा तत्व आसानी से केंद्र में रख सकता है।

एचटीएमएल

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

सीएसएस

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

कैल्क () का उपयोग करना

कैल्क () फ़ंक्शन CSS3 में एक नए वाक्यविन्यास का हिस्सा है जिसमें आप गणना कर सकते हैं (गणितीय रूप से) कि पिक्सल, प्रतिशत आदि जैसे विभिन्न मूल्यों का उपयोग करके आपका तत्व किस आकार / स्थिति में है नोट: - जब भी आप इस फ़ंक्शन का उपयोग करते हैं , हमेशा दो मान के बीच की जगह का ध्यान रखें calc(100% - 80px) ।

सीएसएस

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

एचटीएमएल

<div class="center"></div>

ऊर्ध्वाधर रूप से गतिशील ऊंचाई तत्वों को संरेखित करें

सीएसएस को सहज रूप से लागू करने से वांछित परिणाम नहीं मिलते हैं

vertical-align:middle ब्लॉक-स्तरीय तत्वों पर लागू नहीं होता है
margin-top:auto और margin-bottom:auto उपयोग किए गए मान शून्य के रूप में गणना करेंगे
margin-top:-50% प्रतिशत-आधारित मार्जिन मानों की गणना ब्लॉक वाले चौड़ाई के सापेक्ष की जाती है

व्यापक ब्राउज़र समर्थन के लिए, सहायक तत्वों के साथ एक समाधान:

एचटीएमएल

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

सीएसएस

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

मूल प्रश्न से jsfiddle । यह दृष्टिकोण

गतिशील ऊंचाई तत्वों के साथ काम करता है
सामग्री प्रवाह का सम्मान करता है
विरासत ब्राउज़रों द्वारा समर्थित है

लाइन-ऊंचाई का उपयोग करना

आप एक कंटेनर के अंदर पाठ की एक पंक्ति को लंबवत रूप से केन्द्रित करने के लिए line-height का उपयोग कर सकते हैं:

सीएसएस

div {
    height: 200px;
    line-height: 200px;
}

यह काफी बदसूरत है, लेकिन एक <input /> तत्व के अंदर उपयोगी हो सकता है। line-height प्रॉपर्टी तभी काम करती है, जब टेक्स्ट को एक ही लाइन पर केंद्रित किया जाए। यदि पाठ कई लाइनों में लपेटता है, तो परिणामी आउटपुट केंद्रित नहीं होगा।

ऊंचाई या चौड़ाई की चिंता किए बिना लंबवत और क्षैतिज रूप से केंद्रित

निम्न तकनीक आपको अपनी सामग्री को एक HTML तत्व में जोड़ने की अनुमति देती है और इसे क्षैतिज या लंबवत रूप से इसकी ऊंचाई या चौड़ाई की चिंता किए बिना दोनों को केंद्र में रखती है ।

बाहरी कंटेनर

display: table; होना चाहिए display: table;

भीतर का कंटेनर

display: table-cell; होना चाहिए display: table-cell;
vertical-align: middle; होना चाहिए vertical-align: middle;
text-align: center; होना चाहिए text-align: center;

सामग्री बॉक्स

display: inline-block; होना चाहिए display: inline-block;
क्षैतिज पाठ-संरेखण को फिर से समायोजित करना चाहिए उदा। text-align: left; या text-align: right; , जब तक आप पाठ को केंद्रित नहीं करना चाहते

डेमो

एचटीएमएल

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

सीएसएस

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

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

निश्चित आकार के साथ केंद्रित

यदि आपकी सामग्री का आकार तय हो गया है, तो आप अपनी सामग्री की चौड़ाई और ऊँचाई को कम करने वाले margin साथ 50% तक पूर्ण स्थिति का उपयोग कर सकते हैं:

एचटीएमएल

<div class="center">
    Center vertically and horizontally
</div>

सीएसएस

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

केवल निश्चित चौड़ाई के साथ क्षैतिज केंद्र

आप तत्व को क्षैतिज रूप से केंद्र में रख सकते हैं, भले ही आपको सामग्री की ऊंचाई पता न हो:

एचटीएमएल

<div class="center">
    Center only horizontally
</div>

सीएसएस

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

निश्चित ऊंचाई के साथ लंबवत केंद्र

यदि आप तत्व की ऊँचाई जानते हैं तो आप तत्व को लंबवत रूप से केन्द्रित कर सकते हैं:

एचटीएमएल

<div class="center">
    Center only vertically
</div>

सीएसएस

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

मार्जिन का उपयोग करना: 0 ऑटो;

margin: 0 auto; का उपयोग करके वस्तुओं को केंद्रित किया जा सकता है margin: 0 auto; यदि वे ब्लॉक तत्व हैं और एक परिभाषित चौड़ाई है।

एचटीएमएल

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

सीएसएस

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

परिणाम:

JSFiddle उदाहरण: मार्जिन के साथ वस्तुओं को केंद्रित करना: 0 ऑटो;

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
केंद्रित

खोज…

CSS ट्रांसफ़ॉर्मेशन का उपयोग करना

क्रॉस ब्रास कम्पेटिबिलिटी

अधिक जानकारी

फ्लेक्सबॉक्स का उपयोग करना

स्थिति का उपयोग करना: निरपेक्ष

भूत तत्व तकनीक (मिशेल Cernernow हैक)

पाठ-संरेखण का उपयोग करना

किसी अन्य वस्तु के संबंध में केंद्रित होना

कोड की 3 पंक्तियों के साथ ऊर्ध्वाधर कुछ भी संरेखित करें

ऊर्ध्वाधर रूप से div के अंदर एक छवि संरेखित करें

टेबल लेआउट का उपयोग करते हुए क्षैतिज और ऊर्ध्वाधर केंद्र

कैल्क () का उपयोग करना

ऊर्ध्वाधर रूप से गतिशील ऊंचाई तत्वों को संरेखित करें

लाइन-ऊंचाई का उपयोग करना

ऊंचाई या चौड़ाई की चिंता किए बिना लंबवत और क्षैतिज रूप से केंद्रित

बाहरी कंटेनर

भीतर का कंटेनर

सामग्री बॉक्स

डेमो

निश्चित आकार के साथ केंद्रित

केवल निश्चित चौड़ाई के साथ क्षैतिज केंद्र

निश्चित ऊंचाई के साथ लंबवत केंद्र

मार्जिन का उपयोग करना: 0 ऑटो;