मैं कैसे स्क्रीन के नीचे केंद्र में एक div स्थिति है

Question

मैं इस सीएसएस है: कैसे हम नीचे बीच में है कि div स्थिति है

<div id="manipulate" align="center"> 

</div> 

:

#manipulate 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:#063; 
    bottom:0px; 
    right:25%; 
} 

मैं इस एचटीएमएल है स्क्रीन का?!

Answer 1

align="center" का कोई प्रभाव नहीं है।

चूंकि आपके पास position:absolute है, इसलिए मैं बाईं ओर से 50% की स्थिति निर्धारित करने और उसके बाएं हाशिए से इसकी चौड़ाई का आधा घटाकर अनुशंसा करता हूं।

#manipulate { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:#063; 
    bottom:0px; 
    right:25%; 
    left:50%; 
    margin-left:-150px; 
} 

Answer 2

उपयोग नकारात्मक हाशिए:

#manipulate 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    margin-left:-150px; 
    background:#063; 
    bottom:0px; 
    left:50%; 
} 

यहाँ कुंजी width, left और margin-left गुण है।

Answer 3

आप नकारात्मक मार्जिन का उपयोग करके इसे केंद्रित कर सकते हैं लेकिन कृपया ध्यान दें कि यह स्क्रीन के केंद्र पर बिल्कुल केंद्रित होगा यदि कोई भी div div स्थिति में सेट नहीं है: सापेक्ष;

उदाहरण के लिए। http://jsfiddle.net/aWNCm/

तो, इस div को बिल्कुल सही करने के लिए सबसे अच्छा तरीका यह है कि इसके गुणों के लिए सही गुण स्थिति गुण सेट करना है अन्यथा यह कुछ यादृच्छिक तरीकों से खो जाएगा।

Answer 4

यहाँ दो divs के साथ एक समाधान है:

HTML:

<div id="footer"> 
     <div id="center"> 
      Text here 
     </div> 
    </div> 

सीएसएस:

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 
#center { 
    width: 500px; 
    margin: 0 auto; 
} 

Answer 5

आप नकारात्मक हाशिए का उपयोग कर के साथ सहज नहीं हैं, तो इस पर गौर करें।

एचटीएमएल -

<div> 
Your Text 
</div> 

सीएसएस -

div { 
    position: fixed; 
    left: 50%; 
    bottom: 20px; 
    transform: translate(-50%, -50%); 
    margin: 0 auto; 
} 

विशेष रूप से उपयोगी है यदि आप div की चौड़ाई पता नहीं है जब।