लंबवत div को कैसे केंद्रित करें?

Question

मेरे पास div है जो मैं क्षैतिज और लंबवत केंद्र बनाना चाहता हूं।

क्षैतिज समस्या के लिए सबकुछ बढ़िया है, लेकिन मुझे लंबवत संरेखण में समस्या है।

#parent { 
    display: table; 
} 

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

लेकिन यह काम नहीं करता:

मैं इस कोशिश की।

Answer 1

यदि आपको केवल transform (या इसके विक्रेता प्रीफ़िक्स्ड संस्करणों) का समर्थन करने वाले ब्राउज़र का समर्थन करना है, तो तत्वों को लंबवत रूप से संरेखित करने के लिए इस अजीब पुरानी चाल का उपयोग करें।

#child { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

आप पुराने ब्राउज़र का समर्थन करने के लिए है, तो आप इन के संयोजन का उपयोग कर सकते हैं, लेकिन वे block बनाम table प्रतिपादन में अंतर के कारण एक दर्द हो सकता है।

#parent { 
    display: table; 
} 

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

अपनी ऊंचाई तय हो गई है और आप उन वास्तव में वर्ष, परेशान करने ब्राउज़रों का समर्थन करने के लिए की जरूरत है ...

#parent { 
    position: relative; 
} 

#child { 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

अपनी ऊंचाई तय नहीं है, तो वहाँ एक workaround है।

See it on jsFiddle।

Answer 2

सबसे पहले, टेबल के रूप में गैर-टेबल मार्कअप का इलाज (प्रदर्शन: तालिका और दोस्तों के साथ) क्रॉस-ब्राउज़र नहीं है। मुझे नहीं पता कि आपको कौन से ब्राउज़र का समर्थन करने की आवश्यकता है लेकिन निश्चित रूप से आईई 6 ऐसा नहीं करेगा। लेकिन, यदि आपका लक्षित ब्राउज़र सभी समर्थन प्रदर्शन: तालिका मैं आपको कुछ सुझाव दे सकता हूं।

लंबवत केंद्रित दृष्टिकोण जिसे आप ढूंढ रहे हैं (तालिका लेआउट का उपयोग करके) लंबवत-संरेखण के साथ एक टीडी होने पर निर्भर करता है: मध्य, फिर उस ब्लॉक तत्व के अंदर लंबवत केंद्र होगा। तो मुझे लगता है कि तुम क्या चाहते हैं:

#parent { display:table-cell; vertical-align:middle; } 
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ } 

यह कोई आसपास तालिका पंक्ति और तालिका के साथ तालिका सेल का उपयोग करने के ठीक है, ब्राउज़र आप के लिए आवश्यक तालिका रैपिंग तत्वों infers।

Answer 3

यहाँ एक और तरीका है जब आप भीतरी div आकार या जो कुछ भी पता नहीं है है, तो आप% यहाँ का उपयोग कर सकते हैं और वहाँ ठीक करने के लिए "केंद्रित" ....

विचार है कि अपने शीर्ष मूल्य है आधा अपने बच्चे तत्व की ऊंचाई केंद्रित भ्रम

यहाँ बनाने के लिए के रूप में कोड है:

#parent { 
    position: relative; 
    height: 300px; 
    width:200px; 
    background-color:green; 
} 

#child { 
    height: 50%; 
    width: 50%; 
    position:relative; 
    top:25%; 
    left:25%; 
    background-color:red; 
} 

:

<div id="parent"> 
    <div id="child"> 
      hello 
    </div> 
</div> 

और स्टाइल के लिए

यहाँ आप यह कार्रवाई में http://jsfiddle.net/Wabxv/

Answer 4

display: table-cell के रूप में के रूप में, display:table मूल प्रॉपर्टी और बच्चे संपत्ति होने देख सकते हैं और vertical-align: middle मेरे लिए काम किया।