खड़ी केंद्रित और horzontally translateX का उपयोग कर/वाई काम नहीं कर के रूप में उम्मीद

Question

यह: vertical centering working great कोड:

` <div class="container"> 
     <h1>Vertical center with only 3 lines of code</h1> 

     <section class="text"> 
      <p>I'm vertically aligned! Hi ho Silver, away!</p> 
     </section> 
    </div>`  

लेकिन अगर मैं दो uncommenting के बाद के माध्यम से

left: 50%; translateX(-50%); 

एक ही दृष्टिकोण का उपयोग कर क्षैतिज केंद्रित करने के लिए कोशिश सीएसएस 0.cमें .container तत्व में लाइनें मुझे अजीब परिणाम मिलता है: कंटेनर क्षैतिज केंद्रित है, लेकिन ऊर्ध्वाधर केंद्र खो गया है। मैं यहां क्या खो रहा हूं, और मैं जो चाहता हूं उसे प्राप्त करने के लिए: अनुवादक/वाई के माध्यम से पृष्ठ पर कंटेनर को लंबवत और क्षैतिज रूप से केंद्रित करने के लिए?

Answer 1

कारण यह काम नहीं कर रहा था क्योंकि बाद संपत्ति पिछले एक अधिलेखित कर देगा। इस प्रकार, आप केवल क्षैतिज केंद्रित देखेंगे।

.container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateY(-50%); /* This would be overwritten */ 
    transform: translateX(-50%); /* By this.. */ 
} 

समाधान इस तरह मूल्यों गठबंधन करने के लिए होगा:

transform: translateX(-50%) translateY(-50%); 

या ..

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

Updated Example - जोड़ा विक्रेता उपसर्गों।

Answer 2

आप वास्तव में निकट पहुंच गए हैं, इस तरह से अपनी सीएसएस बदलने के लिए:

 body { 
      font-family: Helvetica Neue, Helvetica, sans-serif; 
      background: #59488b; 
      padding: 1em; 
      text-align:center; 
     } 
     * { 
      text-align:center; 
     } 
     .container { 
      position: absolute; 
      top: 50%; 
      left:50%; 
      transform: translateY(-50%) translateX(-50%); 
      border: 2px solid red; 
     } 
     .text p { 
      position: relative; 
      top: 50%; 
      transform: translateY(-50%); 
     } 
     section { 
      display: block; 
      max-width: 500px; 
      background: #433669; 
      margin: 0 auto 1em; 
      height: 100px; 
      border-radius: .5em; 
      color: white; 
      padding: 1em; 
     } 

See fiddle here