Div में बिल्कुल तैनात तत्व को केंद्र में कैसे रखें?

1078

मुझे अपनी विंडो के केंद्र में एक div(साथ position:absolute;) तत्व रखने की आवश्यकता है। लेकिन मुझे ऐसा करने में समस्या हो रही है, क्योंकि चौड़ाई अज्ञात है ।

मैंने यह कोशिश की। लेकिन इसे समायोजित करने की आवश्यकता है क्योंकि चौड़ाई उत्तरदायी है।

.center {
  left: 50%;
  bottom:5px;
}

कोई विचार?

— ish
स्रोत

4

आपके पास निरपेक्ष केंद्र उदाहरणों में एक उदाहरण है जिसे विभिन्न स्थितियों में सामान्यीकृत किया जा सकता है।

— Mihai8

2

इस सवाल का एक बेहतर जवाब है stackoverflow.com/questions/17976995/…

— एंड्रयू स्विफ्ट

1333

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

स्निपेट का विस्तार करें

— bobince
स्रोत

76

बहुत बढ़िया। मेरे लिए काम किया! मेरे पास एक समस्या थी: जिस छवि को मैं केंद्रित कर रहा था वह काफी बड़ी थी, इससे बाहरी div पृष्ठ के दाहिने किनारे से आगे निकल गया और क्षैतिज स्क्रॉलिंग हो गई। मैंने "दाएं" के लिए "बाएं" सीएसएस संपत्ति को स्वैप किया, और अब तक यह बेहतर काम करता है क्योंकि स्क्रीन के बाएं किनारे पर स्क्रॉल करने का कारण नहीं है

— बूमशाखा

यदि उपयोगकर्ता ने पृष्ठ को नीचे स्क्रॉल किया है, तो शीर्ष पर ओवरीले दिखाई देता है, क्या आपको लगता है कि स्क्रॉल समस्या को ठीक करने के लिए jquery का उपयोग करना एक अच्छा विचार होगा

— PUG

1

स्क्रॉल समस्या का एक समाधान हो सकता है position: fixedलेकिन अगर ऊंचाई ओवरले से अज्ञात है, तो ओवरले के लिए स्क्रॉल बार को लागू करना होगा

— PUG

3

एक छोटी सी समस्या है जो मैंने इस तकनीक का उपयोग करके सामना किया है। क्योंकि बाहरी div स्क्रीन का 50% हिस्सा लेता है, कुछ शिफ्टिंग तब होती है जब पाठ 50% स्क्रीनसेशन से अधिक व्यापक होता है। मैंने बाहरी div को "चौड़ाई: 100%" पर सेट करके और बाईं संपत्ति को हटाकर इसे हल किया। भीतर के विभाग के लिए, मैंने बस अपने पाठ-संरेखण को केंद्र में रखा। यह समस्या को हल करता है।

— निकी एल।

3

प्रतिशत ऊँचाई इस मामले में, युक्त ब्लॉक के सापेक्ष है <html>। लेकिन <html>तत्व में कोई heightनिर्दिष्ट नहीं है इसलिए यह दस्तावेज़ में सभी सामग्री की ऊंचाई लेता है, जो कि कुछ भी नहीं है क्योंकि केवल सामग्री बिल्कुल-पोजिशन (सामग्री प्रवाह से बाहर) ली गई है। तत्व में जोड़ने height: 100%से <html>इससे फर्क पड़ता है।

— बॉबसन

1801

यह मेरे लिए काम करता है:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

स्निपेट का विस्तार करें

— मथायस वीलर
स्रोत

36

मैं बस यह चाहता हूं कि नकारात्मक मार्जिन पूरी तरह से सीएसएस मान्य हो और इसे "गंदे हैक" के रूप में नहीं देखा जाना चाहिए । W3C बॉक्स मॉडल विनिर्देशन में नकारात्मक मार्जिन का उल्लेख किया गया है। कुछ व्यक्तियों को मनमाने ढंग से तय करने के लिए लगता है कि यह एक हैक है क्योंकि वे (ए) उनसे अनभिज्ञ हैं, या बी) उनका उपयोग उनके खराब सीएसएस को ठीक करने के लिए कर रहे हैं।

— जोसेफ रेवेनवॉल्फ़

58

दीव की चौड़ाई को केन्द्रित करना होगा - स्वचालित रूप से उस पर पाठ के साथ एक बटन के साथ, काम नहीं करेगा।

— स्टीफन

2

@ जोशुआ यह केवल क्षैतिज रूप से केंद्र होगा, अन्य उत्तर की तरह लंबवत नहीं।

— योन्गे

3

मैं इस समाधान को पसंद करता हूं क्योंकि यह व्यूपोर्ट का आकार नहीं बढ़ाता है।

— आइसिडेय

13

क्रॉस-ब्राउज़र समर्थन के लिए: widthइसे काम करने के लिए एक विशिष्ट मूल्य पर सेट किया जाना चाहिए। autoऔर 100%तत्व को केंद्र में नहीं रखेगा। display: block;बिलकुल ज़रूरी है। position: absolute;नहीं है एक चाहिए। सभी मूल्य काम करेंगे। मूल तत्व positionको किसी अन्य चीज़ के लिए सेट किया जाना चाहिए static। स्थापना leftऔर rightकरने के लिए 0अनावश्यक है। margin-left: auto; margin-right: auto;काम करेंगे।

— ओनुर येल्ड्रिम

767

उत्तरदायी समाधान

यदि आप IE8 और निम्न का समर्थन करने की आवश्यकता नहीं है, तो सामान्य रूप से उत्तरदायी डिज़ाइन या अज्ञात आयामों के लिए एक अच्छा समाधान है ।

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

कोड स्निपेट दिखाएं

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

स्निपेट का विस्तार करें

यहाँ एक JS Fiddle है

सुराग है, कि left: 50%माता पिता के सापेक्ष है जबकि translateपरिवर्तन तत्वों की चौड़ाई / ऊंचाई के सापेक्ष है।

इस तरह आपके पास बच्चे और माता-पिता दोनों पर एक लचीली चौड़ाई के साथ, एक पूरी तरह से केंद्रित तत्व है। बोनस: यह काम करता है भले ही बच्चा माता-पिता से बड़ा हो।

आप इसे इसके साथ लंबवत भी केन्द्रित कर सकते हैं (और फिर से, माता-पिता और बच्चे की चौड़ाई और ऊंचाई पूरी तरह से लचीली हो सकती है (और / या अज्ञात)):

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

ध्यान रखें कि आपको transformवेंडर के साथ ही उपसर्ग की आवश्यकता हो सकती है । उदाहरण के लिए-webkit-transform: translate(-50%,-50%);

— ProblemsOfSumit
स्रोत

26

IE7 समर्थन के साथ अब आवश्यक नहीं है, यह वास्तविक समाधान होना चाहिए। यह समाधान बाईं ओर से बेहतर है: 0 / दाएं: 0 तकनीक, क्योंकि यह तत्वों को पूरी चौड़ाई देता है जबकि यह चौड़ाई को बरकरार रखता है और अज्ञात चौड़ाई के तत्वों पर काम करता है।

— 6

51

सबसे अच्छा जवाब तक, यह काम करता है अगर बॉक्स डिव समाहित है तो बच्चे की तुलना में छोटा है।

— केस

2

@ChadJohnson बेशक यह करता है। webkit-जैसा कि मैंने सुझाया उपसर्ग के साथ इसे आज़माएं ।

— ProblemsOfSumit

2

आह, मैंने आपके नोट को -webkit के बारे में याद किया। बहुत बढ़िया।

— चाड जॉनसन

3

transform: translateposition: fixedबच्चों में अनुपयोगी लगता है । स्वीकृत उत्तर इस मामले में बेहतर काम करता है।

— dmvianna

49

वास्तव में अच्छा पोस्ट .. बस अगर कोई इसे एकल div टैग के साथ करना चाहता है तो यहाँ जोड़ना चाहता था:

के widthरूप में ले रहा है 900px।

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

इस मामले में widthपहले से पता होना चाहिए ।

— pratikabu
स्रोत

26

"because the width is unknown"... इस सवाल का जवाब नहीं है

— मिशेल Ayres

15

hi @Michel वास्तव में जब आप Google को पूर्ण div को केंद्रित करने से संबंधित कुछ खोजते हैं, तो यह लिंक पहले लिंक के रूप में आता है। इसलिए मैंने इस समाधान को जोड़ा, अगर कोई मेरे जैसा व्यक्ति उपरोक्त समाधान की तलाश में है .. :)

— pratikabu

1

उत्तरदायी डिजाइन के लिए बहुत उपयोगी नहीं है, लेकिन मेरे लिए यह तब तक काम आया जब तक मैंने उत्तरदायी डिजाइन करना शुरू नहीं किया। यह बिल्कुल ज्ञात ज्ञात चौड़ाई तत्वों को केंद्रित करने के लिए एक मान्य उत्तर है ।

— सीन केंडल

35

निरपेक्ष केंद्र

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

सीएसएस:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

डेमो: http://jsbin.com/rexuk/2/

Google Chrome, Firefox और IE8 में परीक्षण किया गया

उम्मीद है की यह मदद करेगा :)

— इजास अमीनुदेने
स्रोत

यह काम नहीं करता है, कृपया निम्नलिखित कोडप्ल कोडपीन की

— Mark

1

क्षमा करें, मुझे लगता है कि यह काम करेगा, लेकिन आपको एक निश्चित ऊंचाई और चौड़ाई शामिल करने की आवश्यकता है। code

— Mark

31

ऊर्ध्वाधर और क्षैतिज के लिए यह काम करता है

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

और यदि आप माता-पिता का तत्व केंद्र बनाना चाहते हैं, तो माता-पिता के सापेक्ष स्थिति निर्धारित करें

 #parentElement{
      position:relative
  }

संपादित करें:

अपने तत्व के लिए ऊर्ध्वाधर केंद्र संरेखित सेट ऊंचाई के लिए। @Raul को धन्यवाद
यदि आप माता-पिता का तत्व केंद्र बनाना चाहते हैं, तो रिश्तेदार को माता-पिता की स्थिति निर्धारित करें

— मोहसेन अब्दुल्लाही
स्रोत

2

मुझे लगता है कि काम करने के लिए आपको ऊंचाई जोड़ने की आवश्यकता है।

— रुल

यह स्थिति पृष्ठ के केंद्र में दिखती है, अन्य तत्व के केंद्र में नहीं।

— गुंटर ज़ोचबॉयर

1

@ GünterZöchbauer हाँ, यदि आप मूल तत्व का केंद्र बनाना चाहते हैं, तो माता-पिता के सापेक्ष स्थिति निर्धारित करें।

— मोहसेन अब्दुल्लाही

20

एक समाधान के लिए खोज करने पर मुझे ऊपर उत्तर मिले और मैथियास वीलर उत्तर के साथ केंद्रित सामग्री का उपयोग किया जा सकता था लेकिन पाठ-संरेखण का उपयोग करना।

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

क्रोम और फ़ायरफ़ॉक्स के साथ काम किया।

— cavila
स्रोत

5

मुझे लगता है कि आपको

— टोबियास

इससे यहां मेरी समस्या ठीक हो गई । धन्यवाद!

— वोलोमाइक

मुझे "पाठ-संरेखण: केंद्र" की आवश्यकता थी, और यह काम किया जहां @ProblemsOfSumit द्वारा सुझाए गए समाधान ने काम नहीं किया क्योंकि यह मेरा पाठ लपेटा था।

— नेट

19

यदि आपको क्षैतिज और लंबवत रूप से केंद्र की आवश्यकता है:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

— michal.jakubeczy
स्रोत

बहुत अच्छा तय धन्यवाद

— स्टेनली बटेश्वर

14

** उत्तरदायी समाधान **

तत्व को div में मानते हुए, एक और div है ...

यह समाधान ठीक काम करता है

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

कंटेनर किसी भी आकार हो सकता है (सापेक्ष स्थिति में होना चाहिए)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

तत्व ( div ) भी किसी भी आकार का हो सकता है ( कंटेनर से छोटा होना चाहिए )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

परिणाम इस तरह दिखेगा। कोड स्निपेट चलाएँ

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

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

स्निपेट का विस्तार करें

मुझे यह बहुत मददगार लगा

— RealMJDev
स्रोत

1

प्रतिभा। क्यों नहीं अन्य इस के साथ आया था।

— mesqueeb

धन्यवाद, खुश कोडिंग

— RealMJDev

13

यह अन्य उत्तरों का मिश्रण है, जो हमारे लिए काम करते हैं:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

— Crashalot
स्रोत

अच्छा ठीक है धन्यवाद आदमी!

— स्टेनली बटेश्वर

12

मैं समझता हूं कि इस प्रश्न के पहले से ही कुछ उत्तर हैं, लेकिन मैंने कभी भी ऐसा समाधान नहीं पाया है जो लगभग सभी वर्गों में काम करेगा, जो समझ में भी आता है और सुरुचिपूर्ण है, इसलिए यहां एक गुच्छा को ट्विक करने के बाद ले रहा हूं:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

स्निपेट का विस्तार करें

यह जो कह रहा है वह मुझे ए top: 50%और ए देता है left: 50%, फिर एक्स / वाई अक्ष दोनों पर रूपांतरण (स्थान बनाएँ)-50% मूल्य में , एक अर्थ में "एक दर्पण स्थान बनाएँ"।

जैसे, यह एक div के सभी 4 बिंदुओं पर एक समान स्थान बनाता है, जो हमेशा एक बॉक्स होता है (जिसमें 4 पक्ष होते हैं)।

यह करेगा:

माता-पिता की ऊंचाई / चौड़ाई जानने के बिना काम करें।
उत्तरदायी पर काम करें।
एक्स या वाई अक्ष पर काम करें। या दोनों, मेरे उदाहरण के रूप में।
मैं ऐसी स्थिति में नहीं आ सकता जहाँ यह काम न करे।

— डैनियल मॉस
स्रोत

कृपया मुझे बताएं कि क्या आपको ऐसी स्थिति मिलती है जहां यह काम नहीं करता है इसलिए मैं आपके इनपुट के साथ प्रश्न को संपादित कर सकता हूं।

— डेनियल मॉस

ट्रांसफॉर्म / ट्रांसलेशन सफारी को निश्चित पैमाने पर टेक्स्ट ब्लेंडर को प्रस्तुत करने का कारण बनेगा

— जेम्स टैन

@DanielMoss उपयोग नहीं करने का कोई कारण translate(-50%,-50%);?

— मार्क बैजेंस

12

आपके कंटेनर तत्व के केंद्र में पूर्ण निरपेक्ष तत्व की किसी भी अज्ञात अज्ञात चौड़ाई पर काम करता है।

डेमो

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowtechsun
स्रोत

9

फ्लेक्स का उपयोग निरपेक्ष तैनात डिव को केंद्र में करने के लिए किया जा सकता है

display:flex;
align-items:center;
justify-content:center;

कोड स्निपेट दिखाएं

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

स्निपेट का विस्तार करें

— धवल जरदोष
स्रोत

मेरी स्क्रीन पर -Firefox 68.x, यह सिर्फ संरेखित नहीं करता है, सापेक्ष ब्लॉक के निचले भाग में निरपेक्ष ब्लॉक दिखाई देता है

— Webwoman

क्या आप यह कोशिश कर सकते हैं display: -webkit-flex;?

— धवल जर्दोष

7

जहां तक मुझे पता है, यह एक अज्ञात चौड़ाई के लिए प्राप्त करना असंभव है।

आप कर सकते हैं - अगर यह आपके परिदृश्य में काम करता है - बिल्कुल 100% चौड़ाई और ऊंचाई के साथ एक अदृश्य तत्व की स्थिति, और मार्जिन का उपयोग करते हुए वहां केंद्रित तत्व है: ऑटो और संभवतः ऊर्ध्वाधर-संरेखित। अन्यथा, आपको जावास्क्रिप्ट करने की आवश्यकता होगी।

— पेका
स्रोत

"मार्जिन: ऑटो" चीज के लिए +1। मैंने लाइन "मार्जिन: 0 ऑटो" का उपयोग करके एक div को क्षैतिज रूप से केंद्र करने से पहले यह कोशिश की है - ऊर्ध्वाधर मार्जिन और "ऑटो" क्षैतिज पर लागू होने वाला "0"। मुझे लगता है कि यह वही है जो StackOverflow पृष्ठ के किनारों के नीचे 2 मोटी सफेद सीमाओं को प्राप्त करने के लिए बहुत ही शीर्ष स्तर div के लिए उपयोग करता है। हालाँकि, सीएसएस मार्जिन पर W3Schools पृष्ठ ऑटो मूल्य के लिए बताता है कि "इसका परिणाम ब्राउज़र पर निर्भर है" - मैंने व्यक्तिगत रूप से कई अलग-अलग ब्राउज़रों में इसकी कोशिश नहीं की है, इसलिए मैं वास्तव में इस बिंदु पर टिप्पणी नहीं कर सकता (लेकिन यह स्पष्ट रूप से उनमें से कुछ में चाल है)

— Steg

1

यदि IE8 कोई समस्या नहीं है, तो यह अज्ञात चौड़ाई (और ऊंचाई) के लिए संभव है। विवरण के लिए मेरा उत्तर देखें।

— ProblemsOfSumit

7

मैं @ bobince के उत्तर में जोड़ना चाहूंगा:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

बेहतर: /// यह क्षैतिज स्क्रॉलबार को केंद्रित div में बड़े तत्वों के साथ दिखाई नहीं देता है।

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

— शीशी
स्रोत

6

ऐसा करने के लिए एक उपयोगी jQuery प्लगइन Heres। यहां मिला । मुझे नहीं लगता कि यह पूरी तरह से सीएसएस के साथ संभव है

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— बेन शेलॉक
स्रोत

यह बेहतर तरीका है, और विशेष रूप से रिप्सोंसिव डिजाइन के साथ।

— m4tm4t 10

किसी भी मामले में jQuery का उपयोग किया गया था, तो तुच्छ हो जाएगा

— कोड Whisperer

8

यह बेहतर तरीका नहीं है। जब भी संभव हो तो CSS का उपयोग करना हमेशा बेहतर होता है। प्रत्येक धुरी में CSS के साथ DIV को केन्द्रित करना और उत्तरदायी पृष्ठों के लिए भी संभव है। जावास्क्रिप्ट की कोई आवश्यकता नहीं है!

— ProblemsOfSumit

1

@yart और इस मामले में उपकरण CSS है।

— ProblemsOfSumit

5

ऊपर उत्तरदायी समाधान के sass / कम्पास संस्करण:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— एडम स्पेंस
स्रोत

4

transform: translate(-50%, -50%)वेबकिट ब्राउज़र का उपयोग करके ओएस एक्स पर पाठ और अन्य सभी सामग्री धुंधली बनाता है। keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— यशा

बस एंटीएलियासिंग के प्रकार का उपयोग करें जिसे आप पसंद करते हैं, -webkit-font-smoothing: antialiased;मैंने उस लेख को चमक दिया है जो आपने btw पोस्ट किया है!

— एडम स्पेंस

4

मेरा पसंदीदा केंद्र विधि:

position: absolute;
margin: auto;
width: x%

पूर्ण ब्लॉक तत्व स्थिति
मार्जिन ऑटो
वही बाएं / दाएं, ऊपर / नीचे

यहाँ JSFiddle

— vp_arth
स्रोत

4

यह मेरे लिए काम किया:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— एलन
स्रोत

यह 5 साल बाद @Matthias Weiler का जवाब है।

— aloisdg

3

मुझे पता है कि मैंने पहले से ही एक उत्तर दिया है, और मेरा पिछला उत्तर, दिए गए अन्य लोगों के साथ, बस ठीक है। लेकिन मैंने अतीत में इसका इस्तेमाल किया है और यह कुछ ब्राउज़रों और कुछ स्थितियों में बेहतर काम करता है। तो मैंने सोचा कि आईडी इस जवाब के रूप में अच्छी तरह से दे। मैंने अपने पिछले उत्तर को "संपादित" नहीं किया और इसे जोड़ दिया क्योंकि मुझे लगता है कि यह एक पूरी तरह से अलग उत्तर है और मैंने जो दो प्रदान किए हैं वे संबंधित नहीं हैं।

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

सीएसएस:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— डस्टिन पॉसेंट
स्रोत

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— बर्कु AKCAOGLU
स्रोत

2

एचटीएमएल

<div id='parent'>
  <div id='centered-child'></div>
</div>

सीएसएस

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— डस्टिन पॉसेंट
स्रोत

2

यदि तत्व है widthऔर यह समाधान काम करता हैheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

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

स्निपेट का विस्तार करें

— मो
स्रोत

2

इस सवाल का हल मेरे मामले के लिए काम नहीं आया .. मैं कुछ छवियों के लिए एक कैप्शन कर रहा हूं और मैंने इसका उपयोग करके हल किया है

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

स्निपेट का विस्तार करें

— Marcogomesr
स्रोत

1

HTML:

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

सीएसएस:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

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

    width: 100px;
    height: 100px;

    background: #ccc;
}

यह और अधिक उदाहरण यहाँ

1

यह एक चाल है जो मुझे एक पृष्ठ के केंद्र में एक डीआईवी प्राप्त करने के लिए प्राप्त करने के लिए लगाई गई है। वास्तव में बदसूरत, लेकिन सभी में काम करता है

डॉट्स और डैश

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

सफाई वाला

वाह, पांच साल बस से उड़ गया, है ना?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— श्री बी
स्रोत

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— AndreyP
स्रोत

0

आप छवि को एक div में रख सकते हैं और एक div id जोड़ सकते हैं और उस div के लिए CSS रख सकते हैं text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

सीएसएस:

#intro_img {
    text-align:center;
}

— ड्वोरविन वॉनस्ट्रेंजल
स्रोत

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

स्निपेट का विस्तार करें

— अमित बेंडे
स्रोत

0

एक सरल दृष्टिकोण जो मेरे लिए क्षैतिज रूप से अज्ञात चौड़ाई के एक ब्लॉक को केंद्र में रखता है:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

ब्लॉक की संरेखण से स्वतंत्र रूप से अपनी सामग्री को संरेखित करने के लिए एक पाठ-संरेखित संपत्ति #ब्लॉक नियम में जोड़ी जा सकती है।

यह फ़ायरफ़ॉक्स, क्रोम, IE, एज और सफारी के हाल के संस्करणों पर काम किया।

— टेरेंस बंदोइयन
स्रोत