dikey Merkezleme ve horzontally translateX kullanarak/Y çalışmıyor

Question

Bu: vertical centering working great Kodu: Ancak

` <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>`  

Ben iki tane uncommenting sonra

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

aracılığıyla aynı yaklaşımı kullanarak yatay ortalamak çalışırsanız CSS 'daki .container öğesinde satırlar tuhaf sonuçlar alıyorum: kap yatay olarak ortalanır, ancak dikey merkezleme kaybolur. Burada ne eksik ve ne istediğimi elde etmek için: kapsayıcıyı translateX/Y ile sayfada dikey ve yatay olarak ortalamak? Gerçekten yakınsın

Answer 1

nedeni oldu. Böylece sadece yatay merkezlemeyi görürsünüz.

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

çözüm böyle değerlerini birleştirmek olacaktır:

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

ya ..

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

Updated Example - katma işportacı ön eki.

Answer 2

böyle CSS değiştirin: İkinci özellik öncekinineredeyse üzerine yazılacağı için çalışma değildi

 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