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

Question

मैं एक साथ दो कैनवस को ढेर करने और इसे एक डबल लेयर कैनवास बनाने की कोशिश कर रहा हूं।

मैंने यहां एक उदाहरण देखा है:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

लेकिन मैं दोनों कैनवस को स्क्रीन के केंद्र में संरेखित करना चाहूंगा। यदि मैं leftएक स्थिर के रूप में मान सेट करता हूं, जबकि मैं स्क्रीन के अभिविन्यास को बदल देता हूं (जैसा कि मैं iPad पर एप्स कर रहा हूं) कैनवास स्क्रीन के मध्य में नहीं रहेगा जैसे यह कैसे कार्य करता है

<div align="center">

किसी की मदद कर सकते हैं, कृपया?

Answer 1

यदि आप बाएं और दाएं दोनों को शून्य पर सेट करते हैं, और बाएं और दाएं मार्जिन को ऑटो पर सेट करते हैं तो आप एक बिल्कुल तैनात तत्व को केंद्र में रख सकते हैं।

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

Comments

क्या आपको तत्व को एक चौड़ाई देने की आवश्यकता नहीं है?

— गेब्रियल फ्लोरिट

मुझे नहीं लगता कि इस मामले में यह आवश्यक है।

— एंड्रयू

बस यह कोशिश की और यह काम करता है, इसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए

— आर रेवले

आप ऑब्जेक्ट को केंद्र से बाहर ले जाने के लिए, बाएं या दाएं मान को बदलकर उपयोग कर सकते हैं। का उपयोग करते हुए left: 80px;केंद्र के अधिकार के लिए वस्तु 40px (!) पर आ जाएगा।

— SPRBRN

टिप्पणी: केवल तभी काम करता है जब स्टाइल वाले तत्व की चौड़ाई दी गई हो। (या तो px या%)

— जॉनी वोंग

Answer 2

यदि आप यह जानना चाहते हैं कि किसी तत्व को चौड़ाई और ऊँचाई के बिना संरेखित करना है:

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

उदाहरण:

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>

Answer 3

क्या आपने प्रयोग करने की कोशिश की है ?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

यकीन नहीं होता कि यह काम करेगा, लेकिन यह एक कोशिश के काबिल है ...

मामूली संपादित करें : चेतन द्वारा टिप्पणियों पर इंगित किए गए मार्जिन-बाएं भाग को जोड़ा गया ...

Comments

हां मैंने यह कोशिश की है, लेकिन कैनवास "शुरुआत" मध्य से है लेकिन स्क्रीन के बीच में "नहीं" रखा गया है। क्या बायाँ सेट करने के लिए कुछ भी है: 50% और कैनवास को फिर से बाईं ओर ले जाएँ?

— पॉलिंग

@PaLLingmargin-left: <negative half the width>

— चेतन एस

चेतन ने क्या कहा .. मुझे इसके लिए हराया: पी मैं भविष्य की पीढ़ियों के लिए अपनी प्रतिक्रिया संपादित करूंगा ...

— डिलेटमैन

स्क्रीन की चौड़ाई अलग होती है जब iPad को अलग ओरिएंटेशन में रखा जाता है

— पॉलिंग

वह आपके कैनवास तत्व की आधी चौड़ाई का मतलब था ..., जो इसे मार्जिन-लेफ्ट बना देगा: -50px;

— डेलेटमैन

Answer 4

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

Answer 5

इस विधि की कोशिश करो, मेरे लिए ठीक काम कर रहा है

position: absolute;
left: 50%;
transform: translateX(-50%); 

Answer 6

तुमको बस यह करना है,

सुनिश्चित करें कि आपके माता-पिता की स्थिति DIV: सापेक्ष है

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

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
  }
http://jsbin.com/aXEZUgEJ/1/

Comments

केवल समाधान जो मेरे लिए काम करता है। जनक फ्लेक्स, फ्लेक्स-ग्रो और ओवरफ्लो पर सेट है। माता-पिता की तुलना में बड़ी छवियों के लिए बच्चे को फ्रेम से बाहर रखा गया था। यह माता पिता की चौड़ाई के बारे में पता नहीं लग रहा था। यह अब तय हो गया है। बहुत धन्यवाद!

— काई

Answer 7

माता-पिता को मध्य में ले जाएं

left: 50%;
top: 50%;
margin-left: -50px;

दूसरी परत को दूसरे के साथ घुमाएँ

position: relative;
left: -100px;