मैं लंबवत रूप से स्थिति को संरेखित कैसे कर सकता हूं: सापेक्ष तत्व

Question

मैं आज कुछ बुनियादी सीएसएस को आजमाने की कोशिश कर रहा हूं और मैंने एक समस्या में ठोकर खाई। मुझे उम्मीद है कि कोई मेरी मदद कर सकता है।

मैं पैरेंट कंटेनर कैनवास में लंबवत केंद्र को कैसे संरेखित कर सकता हूं जिसमें स्थिति है: इसके सापेक्ष? माता-पिता के कंटेनर में स्थिति वाला बच्चा तत्व होता है: इसके लिए पूर्ण। बच्चे तत्व को मूल कंटेनर के केंद्र में रखा गया है।

मैंने इसके लिए एक JSFiddle बनाया है। http://jsfiddle.net/exmRf/

चीयर्स, वेन।

Answer 1

एक समाधान करने के लिए प्रयोग किया जाता है रैप करने के लिए प्रयोग किया जाता है अपने दो रैपर के साथ .container; पहले एक display: table; और height: 100%; width: 100%; और दूसरा display: table-cell; और vertical-align: middle; दें। यह भी सुनिश्चित करें कि आपका body और html पूर्ण ऊंचाई है।

यहां एक छोटा काम करने वाला डेमो है: little link।

एक और तरीका top: 50%; को .container और margin-top: -150px; (300px/2 = 150px) पर लागू करना है। (ध्यान दें कि इस विधि के लिए आपको अपने कंटेनर की सटीक ऊंचाई जानने की आवश्यकता है, इसलिए ठीक वही नहीं हो सकता है जो आप चाहते हैं, लेकिन यह भी हो सकता है!)। इस बाद की विधि का एक छोटा कामकाजी डेमो: another little link।

मुझे आशा है कि इससे मदद मिलेगी!

Answer 2

Demo

शीर्ष

अब इस सीएसएस करने के लिए इस्तेमाल की चौड़ाई या मार्जिन टॉप छमाही के अपने itemleft 50% और top 50% और margin-left आधा के बारे में बताएं

.container{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    margin:auto; 
} 

.item{ 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    left:50%; 
    top:50%; 
    margin-left:-50px; 
    margin-top:-50px; 
} 

Demo

अगर आप स्थिति नहीं है की तुलना में इस http://jsfiddle.net/exmRf/16/