Jak mogę pionowo centrum align div z dynamiczną wielokrotnej linii tekstu

Question

Poniżej jest CSS używam:

 .flip-container 
      { 
     -webkit-perspective: 1000; 
     -moz-perspective: 1000; 
     perspective: 1000; 


    } 



    .flip-container:hover .flipper, .flip-container.hover .flipper { 
      -webkit-transform: rotateY(180deg); 
      -moz-transform: rotateY(180deg); 
       transform: rotateY(180deg); 
    } 

    .flip-container, .front, .back { 
        width: 150px; 
        height: 150px; 

    } 

    .flipper { 
     -webkit-transition: 0.6s; 
     -webkit-transform-style: preserve-3d; 
     -moz-transition: 0.6s; 
     -moz-transform-style: preserve-3d; 
     transition: 0.6s; 
     transform-style: preserve-3d; 
     position: relative; 
    } 

    .front, .back { 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     backface-visibility: hidden; 
     display: table-cell; 
     vertical-align:middle; 

     position: absolute; 
     top: 0; 
     left: 0; 

    } 

    .front { 
     z-index: 2; 
     text-align: center; 
    } 

    .back { 

     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     transform: rotateY(180deg); 

    } 

    .front .name { 
     font-size: 2em; 
     display: inline-block; 
     background: rgba(33, 33, 33, 0.9); 
     color: #f8f8f8; 
     font-family: Courier; 
     padding: 5px 10px; 
     border-radius: 5px; 
     bottom: 60px; 
     left: 25%; 
     position: absolute; 
     text-shadow: 0.1em 0.1em 0.05em #333; 

     -webkit-transform: rotate(-20deg); 
     -moz-transform: rotate(-20deg); 
     transform: rotate(-20deg); 
    } 

    .back-logo { 
     position: absolute; 
     top: 40px; 
     left: 90px; 
     width: 160px; 
     height: 117px; 
     background: url(logo.png) 0 0 no-repeat; 

    } 

    .back-title { 
     font-weight: bold; 
     color: #00304a; 
     position: absolute; 
     top: 180px; 
     left: 0; 
     right: 0; 
     text-align: center; 
     text-shadow: 0.1em 0.1em 0.05em #acd7e5; 
     font-family: Courier; 
     font-size: 2em; 

    } 

    .back p { 
     position: absolute; 
     bottom: 40px; 
     left: 0; 
     right: 0; 
     text-align: center; 
     padding: 0 20px; 

    } 

HTML że używam wygląda następująco:

<div id="article"><div class="flip-container" ontouchstart="this.classList.toggle('.'hover'.');"> 
<div class="flipper"> 
<div class="front"> 
    <!-- front content --> 
    </div> 
    <div class="back"> 
    <!-- back content --> 
    <img src="" width="160" height="160" /> </div> 
</div> 
</div> 
</div> 

CSS z klasa artykuł:

#article { 
margin: 5px; 
float: left; 
height: 150px; 
width: 150px;} 

jestem w stanie dokonać FEXT w PRZODU Środek div środkowo pionowo wyśrodkowany. Również byłby dynamiczny i wielowierszowy. Jakieś pomysły?

Próbowałem użyć "vertical-align: middle" wraz z "display: table-cell", ale to nie pomogło, a może po prostu zastosowałem je do niewłaściwych bloków CSS.

Kodeks jest na jsFiddle: here

Answer 1

Można użyć display: table dla kontenera nadrzędnego i display: table-cell do pojemnika dziecko:

#article { 
    display:table; 
    height: 150px; 
    width: 150px; 
    float: left; 
    text-align: center; 
} 

.front { 
    display: table-cell; 
    vertical-align:middle; 
} 

Fiddle Demo:http://jsfiddle.net/uVSN6/1/